<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { api } from '../utis/request'
import * as echarts from 'echarts'


// 声明AMap类型
declare const AMap: any

const router = useRouter()

// 用户信息
const userInfo = ref<any>(null)

// 当前页面
const currentPage = ref('dashboard')

// 供应商管理页面状态
const supplierPageState = ref('list') // 'list' 或 'add' 或 'detail'

// 客户管理页面状态
const customerPageState = ref('list') // 'list' 或 'add' 或 'detail'

// 地图相关状态
const showMapDialog = ref(false)
const mapLoaded = ref(false)
const selectedAddress = ref('')
const mapAddress = ref('')
let map: any = null
let localSearch: any = null

// 百度地图API密钥
const AK = 'JejBYDSsA76GlOH5xNMJmAjXghFPbdYA'



// 供应商详情数据
const supplierDetail = ref<any>(null)

// 客户详情数据
const customerDetail = ref<any>(null)

// 羊场存栏统计相关数据
const sheepLoading = ref(false)
const sheepFarms = ref<any[]>([])
const sheepInventoryData = ref<any>({})
const sheepTableSortBy = ref('')
const sheepExportFormat = ref('excel')

// 羊场筛选参数
const sheepFilterParams = reactive({
  farmId: '',
  startDate: '',
  endDate: ''
})

// 羊场实时存栏相关数据
const sheepRealtimeLoading = ref(false)
const sheepRealtimeData = ref<any>({})
const sheepRealtimeFarms = ref<any[]>([])
const sheepRealtimeFilterParams = reactive({
  farmId: ''
})

// 产羔统计相关数据
const lambingLoading = ref(false)
const lambingData = ref<any>({})
const lambingFarms = ref<any[]>([])
const lambingFilterParams = reactive({
  farmId: '',
  startDate: '',
  endDate: '',
  year: ''
})

// 种母配怀统计相关数据
const breedingLoading = ref(false)
const breedingData = ref<any>({})
const breedingFarms = ref<any[]>([])
const breedingFilterParams = reactive({
  farmId: '',
  startDate: '',
  endDate: '',
  year: ''
})

// 种母生产统计相关数据
const productionLoading = ref(false)
const productionData = ref<any>({})
const productionFarms = ref<any[]>([])
const productionFilterParams = reactive({
  farmId: '',
  startDate: '',
  endDate: '',
  year: '',
  productionType: ''
})

// 切换页面
const switchPage = (page: string) => {
  currentPage.value = page
  // 如果切换到供应商管理页面，自动加载数据
  if (page === 'supplier') {
    supplierPageState.value = 'list'
    searchSuppliers()
  }
  // 如果切换到客户管理页面，自动加载数据
  if (page === 'customer') {
    customerPageState.value = 'list'
    searchCustomers()
  }
  // 如果切换到羊场存栏统计页面，在右侧内容区域显示
  if (page === 'sheep-inventory') {
    // 加载羊场存栏统计数据
    loadSheepFarms()
    loadSheepInventoryData()
  }
  // 如果切换到羊场实时存栏页面，在右侧内容区域显示
  if (page === 'sheep-realtime') {
    // 加载羊场实时存栏数据
    loadSheepRealtimeFarms()
    loadSheepRealtimeData()
  }
  // 如果切换到产羔统计页面，在右侧内容区域显示
  if (page === 'lambing-statistics') {
    // 加载产羔统计数据
    loadLambingFarms()
    loadLambingStatisticsData()
  }
  // 如果切换到种母配怀统计页面，在右侧内容区域显示
  if (page === 'breeding-statistics') {
    // 加载种母配怀统计数据
    loadBreedingFarms()
    loadBreedingStatisticsData()
  }
  // 如果切换到种母生产统计页面，在右侧内容区域显示
  if (page === 'production-statistics') {
    // 加载种母生产统计数据
    loadProductionFarms()
    loadProductionStatisticsData()
  }
}

// 羊场存栏统计相关方法
const loadSheepFarms = async () => {
  try {
    const response = await api.sheep.getFarms()
    sheepFarms.value = response.data?.data || []
  } catch (error) {
    console.error('加载羊场列表失败:', error)
  }
}

const loadSheepInventoryData = async () => {
  sheepLoading.value = true
  try {
    const params: any = {}
    if (sheepFilterParams.farmId) params.farmId = sheepFilterParams.farmId
    if (sheepFilterParams.startDate) params.startDate = sheepFilterParams.startDate
    if (sheepFilterParams.endDate) params.endDate = sheepFilterParams.endDate
    
    const response = await api.sheep.getInventoryStatistics(params)
    sheepInventoryData.value = response.data?.data || {}
  } catch (error) {
    console.error('加载存栏统计数据失败:', error)
  } finally {
    sheepLoading.value = false
  }
}

const searchSheepData = () => {
  loadSheepInventoryData()
}

const resetSheepFilter = () => {
  sheepFilterParams.farmId = ''
  sheepFilterParams.startDate = ''
  sheepFilterParams.endDate = ''
  loadSheepInventoryData()
}

const handleSheepFilterChange = () => {
  // 可以在这里添加防抖逻辑
}

const handleSheepSortChange = () => {
  // 排序逻辑在computed中处理
}

const refreshSheepData = () => {
  loadSheepInventoryData()
}

const exportSheepData = async () => {
  try {
    // 显示加载状态
    sheepLoading.value = true
    
    // 构建导出参数
    const params: any = {
      format: sheepExportFormat.value // 使用用户选择的格式
    }
    
    // 添加筛选参数
    if (sheepFilterParams.farmId) params.farmId = sheepFilterParams.farmId
    if (sheepFilterParams.startDate) params.startDate = sheepFilterParams.startDate
    if (sheepFilterParams.endDate) params.endDate = sheepFilterParams.endDate
    
    // 调用导出API
    const response = await api.sheep.exportInventoryStatistics(params)
    
    // 创建下载链接
    const isExcel = sheepExportFormat.value === 'excel'
    const blob = new Blob([response.data], { 
      type: isExcel ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' : 'text/csv;charset=utf-8'
    })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    
    // 生成文件名
    const timestamp = new Date().toISOString().slice(0, 10).replace(/-/g, '')
    const farmName = sheepFilterParams.farmId ? 
      sheepFarms.value.find(f => f.farmId == sheepFilterParams.farmId)?.farmName || '筛选' : 
      '全部'
    const extension = isExcel ? 'xlsx' : 'csv'
    link.download = `羊场存栏统计报表_${farmName}_${timestamp}.${extension}`
    
    // 触发下载
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    // 清理URL对象
    window.URL.revokeObjectURL(url)
    
    // 显示成功提示
    console.log('报表导出成功')
    
  } catch (error) {
    console.error('导出报表失败:', error)
    alert('导出报表失败，请稍后重试')
  } finally {
    sheepLoading.value = false
  }
}

const getSheepHealthStatusClass = (status: string) => {
  switch (status) {
    case '健康':
      return 'status-healthy'
    case '正常':
      return 'status-normal'
    case '一般':
      return 'status-warning'
    case '需要关注':
      return 'status-sick'
    default:
      return 'status-normal'
  }
}

// 羊场存栏统计计算属性
const sheepMaleCount = computed(() => {
  return sheepInventoryData.value.genderStatistics?.find((g: any) => g.gender === 'Male')?.count || 0
})

const sheepFemaleCount = computed(() => {
  return sheepInventoryData.value.genderStatistics?.find((g: any) => g.gender === 'Female')?.count || 0
})

const sortedSheepBreedStatistics = computed(() => {
  if (!sheepInventoryData.value.breedStatistics) return []
  
  const stats = [...sheepInventoryData.value.breedStatistics]
  
  switch (sheepTableSortBy.value) {
    case 'breed':
      return stats.sort((a, b) => a.breed.localeCompare(b.breed))
    case 'count':
      return stats.sort((a, b) => b.count - a.count)
    case 'percentage':
      return stats.sort((a, b) => b.percentage - a.percentage)
    default:
      return stats
  }
})

// 羊场实时存栏相关方法
const loadSheepRealtimeFarms = async () => {
  try {
    const response = await api.sheep.getFarms()
    sheepRealtimeFarms.value = response.data?.data || []
  } catch (error) {
    console.error('加载羊场列表失败:', error)
  }
}

const loadSheepRealtimeData = async () => {
  sheepRealtimeLoading.value = true
  try {
    const params: any = {}
    if (sheepRealtimeFilterParams.farmId) params.farmId = sheepRealtimeFilterParams.farmId
    
    const response = await api.sheep.getRealTimeInventory(params)
    sheepRealtimeData.value = response.data?.data || {}
    
    // 数据加载完成后绘制饼图
    setTimeout(() => {
      drawPieChart()
    }, 100)
  } catch (error) {
    console.error('加载羊场实时存栏数据失败:', error)
  } finally {
    sheepRealtimeLoading.value = false
  }
}

const searchSheepRealtimeData = () => {
  loadSheepRealtimeData()
}

const resetSheepRealtimeFilter = () => {
  sheepRealtimeFilterParams.farmId = ''
  loadSheepRealtimeData()
}

const handleSheepRealtimeFilterChange = () => {
  loadSheepRealtimeData()
}

const refreshSheepRealtimeData = () => {
  loadSheepRealtimeData()
}

const getSheepRealtimeStatusClass = (status: string) => {
  switch (status) {
    case 'Normal':
      return 'status-normal'
    case 'Warning':
      return 'status-warning'
    case 'Critical':
      return 'status-critical'
    default:
      return 'status-normal'
  }
}

const getSheepRealtimeHealthStatusClass = (healthStatus: string) => {
  switch (healthStatus) {
    case 'Healthy':
      return 'status-healthy'
    case 'Sick':
      return 'status-sick'
    case 'Quarantined':
      return 'status-quarantined'
    default:
      return 'status-normal'
  }
}

// 产羔统计相关方法
const loadLambingFarms = async () => {
  try {
    const response = await api.sheep.getFarms()
    lambingFarms.value = response.data?.data || []
  } catch (error) {
    console.error('加载羊场列表失败:', error)
  }
}

const loadLambingStatisticsData = async () => {
  lambingLoading.value = true
  try {
    const params: any = {}
    if (lambingFilterParams.farmId) params.farmId = lambingFilterParams.farmId
    if (lambingFilterParams.startDate) params.startDate = lambingFilterParams.startDate
    if (lambingFilterParams.endDate) params.endDate = lambingFilterParams.endDate
    if (lambingFilterParams.year) params.year = lambingFilterParams.year
    
    const response = await api.sheep.getLambingStatistics(params)
    lambingData.value = response.data?.data || {}
    
    // 数据加载完成后绘制图表
    setTimeout(() => {
      drawLambingChart()
    }, 100)
  } catch (error) {
    console.error('加载产羔统计数据失败:', error)
  } finally {
    lambingLoading.value = false
  }
}

// 绘制产羔统计图表
const drawLambingChart = () => {
  const chartDom = document.getElementById('lambingChart')
  if (!chartDom || !lambingData.value.monthlyStatistics) return
  
  const myChart = echarts.init(chartDom)
  
  const months = lambingData.value.monthlyStatistics.map((item: any) => item.monthName)
  const healthyLambs = lambingData.value.monthlyStatistics.map((item: any) => item.healthyLambs)
  const weakLambs = lambingData.value.monthlyStatistics.map((item: any) => item.weakLambs)
  const deformedLambs = lambingData.value.monthlyStatistics.map((item: any) => item.deformedLambs)
  const mummifiedLambs = lambingData.value.monthlyStatistics.map((item: any) => item.mummifiedLambs)
  const stillbirths = lambingData.value.monthlyStatistics.map((item: any) => item.stillbirths)
  const abnormalFetus = lambingData.value.monthlyStatistics.map((item: any) => item.abnormalFetus)
  const birthCount = lambingData.value.monthlyStatistics.map((item: any) => item.birthCount)
  
  const option = {
    title: {
      text: '月产羔结构统计',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      },
      formatter: function(params: any) {
        let result = params[0].axisValue + '<br/>'
        params.forEach((param: any) => {
          result += param.marker + param.seriesName + ': ' + param.value + '<br/>'
        })
        return result
      }
    },
    legend: {
      data: ['健羔', '弱羔', '畸形', '木乃伊', '死胎', '畸胎', '分娩头数'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisPointer: {
        type: 'shadow'
      }
    },
    yAxis: {
      type: 'value',
      name: '平均产羔只数',
      min: 0,
      max: 20,
      interval: 5
    },
    series: [
      {
        name: '健羔',
        type: 'line',
        data: healthyLambs,
        itemStyle: { color: '#5470c6' },
        smooth: true
      },
      {
        name: '弱羔',
        type: 'line',
        data: weakLambs,
        itemStyle: { color: '#91cc75' },
        smooth: true
      },
      {
        name: '畸形',
        type: 'line',
        data: deformedLambs,
        itemStyle: { color: '#fac858' },
        smooth: true
      },
      {
        name: '木乃伊',
        type: 'line',
        data: mummifiedLambs,
        itemStyle: { color: '#ee6666' },
        smooth: true
      },
      {
        name: '死胎',
        type: 'line',
        data: stillbirths,
        itemStyle: { color: '#73c0de' },
        smooth: true
      },
      {
        name: '畸胎',
        type: 'line',
        data: abnormalFetus,
        itemStyle: { color: '#3ba272' },
        smooth: true
      },
      {
        name: '分娩头数',
        type: 'line',
        data: birthCount,
        itemStyle: { color: '#fc8452' },
        smooth: true
      }
    ]
  }
  
  myChart.setOption(option)
  
  // 响应式处理
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

const searchLambingData = () => {
  loadLambingStatisticsData()
}

const resetLambingFilter = () => {
  lambingFilterParams.farmId = ''
  lambingFilterParams.startDate = ''
  lambingFilterParams.endDate = ''
  lambingFilterParams.year = ''
  loadLambingStatisticsData()
}

const handleLambingFilterChange = () => {
  // 可以在这里添加防抖逻辑
}

const refreshLambingData = () => {
  loadLambingStatisticsData()
}



// 产羔类型中文转换
const getLambingTypeChinese = (lambingType: string) => {
  switch (lambingType) {
    case 'Normal':
      return '正常产羔'
    case 'Difficult':
      return '难产'
    case 'Assisted':
      return '助产'
    case 'Cesarean':
      return '剖腹产'
    case 'Caesarean':
      return '剖腹产'
    case 'Premature':
      return '早产'
    case 'Multiple':
      return '多胎产'
    case 'Stillbirth':
      return '死胎'
    case 'Abortion':
      return '流产'
    default:
      return lambingType || '未知类型'
  }
}

// 种母配怀统计相关方法
const loadBreedingFarms = async () => {
  try {
    const response = await api.sheep.getFarms()
    breedingFarms.value = response.data?.data || []
  } catch (error) {
    console.error('加载羊场列表失败:', error)
  }
}

const loadBreedingStatisticsData = async () => {
  breedingLoading.value = true
  try {
    const params: any = {}
    if (breedingFilterParams.farmId) params.farmId = breedingFilterParams.farmId
    if (breedingFilterParams.startDate) params.startDate = breedingFilterParams.startDate
    if (breedingFilterParams.endDate) params.endDate = breedingFilterParams.endDate
    if (breedingFilterParams.year) params.year = breedingFilterParams.year
    
    const response = await api.sheep.getBreedingStatistics(params)
    breedingData.value = response.data?.data || {}
  } catch (error) {
    console.error('加载种母配怀统计数据失败:', error)
  } finally {
    breedingLoading.value = false
  }
}

const searchBreedingData = () => {
  loadBreedingStatisticsData()
}

const resetBreedingFilter = () => {
  breedingFilterParams.farmId = ''
  breedingFilterParams.startDate = ''
  breedingFilterParams.endDate = ''
  breedingFilterParams.year = ''
  loadBreedingStatisticsData()
}

const handleBreedingFilterChange = () => {
  // 可以在这里添加防抖逻辑
}

const refreshBreedingData = () => {
  loadBreedingStatisticsData()
}



// 配怀状态中文转换
const getBreedingStatusChinese = (status: string) => {
  switch (status) {
    case 'Pregnant':
      return '已怀孕'
    case 'Not Pregnant':
      return '未怀孕'
    case 'Miscarried':
      return '流产'
    case 'Unknown':
      return '未知'
    default:
      return status || '未知状态'
  }
}

// 配种方式中文转换
const getBreedingMethodChinese = (method: string) => {
  switch (method) {
    case 'Natural':
      return '自然配种'
    case 'Artificial':
      return '人工授精'
    case 'Artificial Insemination':
      return '人工授精'
    case 'Embryo Transfer':
      return '胚胎移植'
    case 'Synchronization':
      return '同期发情'
    default:
      return method || '未知方式'
  }
}

// 配种结果中文转换
const getBreedingResultChinese = (result: string) => {
  switch (result) {
    case 'Successful':
      return '成功'
    case 'Failed':
      return '失败'
    case 'Abortion':
      return '流产'
    case 'Empty':
      return '空怀'
    case 'Infertile':
      return '不孕'
    case 'ReturnToEstrus':
      return '返情'
    case 'Miscarriage':
      return '流产'
    case 'Stillbirth':
      return '死胎'
    default:
      return result || '未知结果'
  }
}

// 种母生产统计相关方法
const loadProductionFarms = async () => {
  try {
    const response = await api.sheep.getFarms()
    if (response.data && response.data.data) {
      productionFarms.value = response.data.data
    } else if (response.data && Array.isArray(response.data)) {
      productionFarms.value = response.data
    } else {
      productionFarms.value = []
    }
  } catch (error) {
    console.error('加载羊场列表失败:', error)
  }
}

const loadProductionStatisticsData = async () => {
  productionLoading.value = true
  try {
    const params: any = {}
    if (productionFilterParams.farmId) params.farmId = productionFilterParams.farmId
    if (productionFilterParams.startDate) params.startDate = productionFilterParams.startDate
    if (productionFilterParams.endDate) params.endDate = productionFilterParams.endDate
    if (productionFilterParams.year) params.year = productionFilterParams.year
    if (productionFilterParams.productionType) params.productionType = productionFilterParams.productionType
    
    const response = await api.sheep.getProductionStatistics(params)
    
    // 检查响应结构
    if (response.data && response.data.data) {
      productionData.value = response.data.data
    } else if (response.data) {
      productionData.value = response.data
    } else {
      productionData.value = {}
    }
  } catch (error) {
    console.error('加载种母生产统计数据失败:', error)
  } finally {
    productionLoading.value = false
  }
}

const searchProductionData = () => {
  loadProductionStatisticsData()
}

const resetProductionFilter = () => {
  productionFilterParams.farmId = ''
  productionFilterParams.startDate = ''
  productionFilterParams.endDate = ''
  productionFilterParams.year = ''
  productionFilterParams.productionType = ''
  loadProductionStatisticsData()
}

const handleProductionFilterChange = () => {
  // 可以在这里添加防抖逻辑
}

const refreshProductionData = () => {
  loadProductionStatisticsData()
}



// 生产类型中文转换
const getProductionTypeChinese = (type: string) => {
  switch (type) {
    case 'Wool':
      return '羊毛'
    case 'Milk':
      return '羊奶'
    case 'Meat':
      return '羊肉'
    case 'Breeding':
      return '繁殖'
    case 'Recovery':
      return '康复'
    case 'Research':
      return '研究'
    case 'Lambing':
      return '产羔'
    default:
      return type || '未知类型'
  }
}

// 生产状态中文转换
const getProductionStatusChinese = (status: string) => {
  switch (status) {
    case 'Active':
      return '生产中'
    case 'Completed':
      return '已完成'
    case 'Paused':
      return '暂停'
    case 'Cancelled':
      return '取消'
    case 'Normal':
      return '正常'
    case 'Difficult':
      return '困难'
    case 'Assisted':
      return '助产'
    case 'Emergency':
      return '紧急'
    default:
      return status || '未知状态'
  }
}

// 质量等级中文转换
const getQualityGradeChinese = (grade: string) => {
  switch (grade) {
    case 'Excellent':
      return '优秀'
    case 'Good':
      return '良好'
    case 'Average':
      return '一般'
    case 'Poor':
      return '差'
    default:
      return grade || '未知等级'
  }
}

// 生产环境中文转换
const getEnvironmentChinese = (environment: string) => {
  switch (environment) {
    case 'Indoor':
      return '室内'
    case 'Outdoor':
      return '室外'
    case 'Shelter':
      return '棚舍'
    case 'Pasture':
      return '牧场'
    default:
      return environment || '未知环境'
  }
}

// 饼图颜色配置
const pieChartColors = [
  '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
  '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9'
]

const getPieChartColor = (index: number) => {
  return pieChartColors[index % pieChartColors.length]
}

// 绘制饼图
const drawPieChart = () => {
  const canvas = document.querySelector('canvas') as HTMLCanvasElement
  if (!canvas || !sheepRealtimeData.value.locationStatistics) return
  
  const ctx = canvas.getContext('2d')
  if (!ctx) return
  
  const centerX = canvas.width / 2
  const centerY = canvas.height / 2
  const radius = Math.min(centerX, centerY) - 20
  
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  const data = sheepRealtimeData.value.locationStatistics
  const total = data.reduce((sum: number, item: any) => sum + item.count, 0)
  
  let currentAngle = -Math.PI / 2 // 从12点钟方向开始
  
  data.forEach((item: any, index: number) => {
    const sliceAngle = (item.count / total) * 2 * Math.PI
    
    // 绘制扇形
    ctx.beginPath()
    ctx.moveTo(centerX, centerY)
    ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle)
    ctx.closePath()
    ctx.fillStyle = getPieChartColor(index)
    ctx.fill()
    
    // 绘制边框
    ctx.strokeStyle = '#fff'
    ctx.lineWidth = 2
    ctx.stroke()
    
    currentAngle += sliceAngle
  })
  
  // 绘制中心圆
  ctx.beginPath()
  ctx.arc(centerX, centerY, radius * 0.3, 0, 2 * Math.PI)
  ctx.fillStyle = '#fff'
  ctx.fill()
  ctx.strokeStyle = '#ddd'
  ctx.lineWidth = 1
  ctx.stroke()
  
  // 绘制中心文字
  ctx.fillStyle = '#333'
  ctx.font = '16px Arial'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText('位置分布', centerX, centerY)
}

// 供应商管理相关
const suppliers = ref<any[]>([])
const supplierSearch = ref({
  supplierCode: '',
  supplierName: '',
  contactPerson: '',
  contactPhone: '',
  supplierType: '',
  isActive: '',
  industry: '',
  mnemonicCode: '',
  sortBy: ''
})

// 客户管理相关
const customers = ref<any[]>([])
const customerSearch = ref({
  customerCode: '',
  customerName: '',
  contactPerson: '',
  contactPhone: '',
  customerType: '',
  isActive: '',
  industry: '',
  mnemonicCode: '',
  market: '',
  customerStage: '',
  customTags: '',
  hasCollectionArchives: '',
  sortBy: ''
})

// 新增客户表单数据
const newCustomer = ref({
  customerCode: '',
  customerName: '',
  contactPerson: '',
  contactPhone: '',
  contactIdNumber: '',
  address: '',
  industry: '',
  creditCode: '',
  memo: '',
  customerType: '',
  mnemonicCode: '',
  customerStage: '',
  customTags: '',
  purchaseIntent: '',
  collectionArchives: '',
  belongsToUnit: '',
  market: '',
  isActive: true,
  hasCollectionArchives: false
})

const customerPagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  totalPages: 0
})

// 客户地图相关变量
const showCustomerMapDialog = ref(false)
const customerMapLoaded = ref(false)
const customerSelectedAddress = ref('')
const customerMapAddress = ref('')
let customerMap: any = null
let customerLocalSearch: any = null

// 新增供应商表单数据
const newSupplier = ref({
  supplierCode: '',
  supplierName: '',
  contactPerson: '',
  contactPhone: '',
  contactIdNumber: '',
  address: '',
  industry: '',
  creditCode: '',
  memo: '',
  supplierType: '企业',
  mnemonicCode: '',
  servicePersonnel: '',
  salesperson: '',
  supplierAttributes: '',
  belongsToUnit: '',
  market: '',
  isActive: true
})
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  totalPages: 0
})

// 搜索供应商
const searchSuppliers = async () => {
  try {
    const params = {
      pageIndex: pagination.value.currentPage,
      pageSize: pagination.value.pageSize,
      supplierCode: supplierSearch.value.supplierCode || undefined,
      supplierName: supplierSearch.value.supplierName || undefined,
      contactPerson: supplierSearch.value.contactPerson || undefined,
      contactPhone: supplierSearch.value.contactPhone || undefined,
      supplierType: supplierSearch.value.supplierType || undefined,
      isActive: supplierSearch.value.isActive === '' ? undefined : supplierSearch.value.isActive === 'true',
      industry: supplierSearch.value.industry || undefined,
      mnemonicCode: supplierSearch.value.mnemonicCode || undefined,
      sortBy: supplierSearch.value.sortBy || undefined,
      sortOrder: 'desc'
    }
    const response = await api.supplier.getList(params)
    if (response.data.code === 200) {
      suppliers.value = response.data.data.data || []
      pagination.value.total = response.data.data.totalCount || 0
      pagination.value.totalPages = response.data.data.totalPages || 0
    } else {
      console.error('搜索供应商失败:', response.data.msg)
    }
  } catch (error) {
    console.error('搜索供应商失败:', error)
  }
}

// 搜索客户
const searchCustomers = async () => {
  try {
    const params = {
      pageIndex: customerPagination.value.currentPage,
      pageSize: customerPagination.value.pageSize,
      customerCode: customerSearch.value.customerCode || undefined,
      customerName: customerSearch.value.customerName || undefined,
      contactPerson: customerSearch.value.contactPerson || undefined,
      contactPhone: customerSearch.value.contactPhone || undefined,
      customerType: customerSearch.value.customerType || undefined,
      isActive: customerSearch.value.isActive === '' ? undefined : customerSearch.value.isActive === 'true',
      industry: customerSearch.value.industry || undefined,
      mnemonicCode: customerSearch.value.mnemonicCode || undefined,
      market: customerSearch.value.market || undefined,
      customerStage: customerSearch.value.customerStage || undefined,
      customTags: customerSearch.value.customTags || undefined,
      hasCollectionArchives: customerSearch.value.hasCollectionArchives === '' ? undefined : customerSearch.value.hasCollectionArchives === 'true',
      sortBy: customerSearch.value.sortBy || undefined,
      sortOrder: 'desc'
    }
    const response = await api.customer.getList(params)
    if (response.data.code === 200) {
      customers.value = response.data.data.data || []
      customerPagination.value.total = response.data.data.totalCount || 0
      customerPagination.value.totalPages = response.data.data.totalPages || 0
      
      // 调试：打印第一个客户的数据结构
      if (customers.value.length > 0) {
        console.log('客户数据结构:', customers.value[0])
      }
    } else {
      console.error('搜索客户失败:', response.data.msg)
    }
  } catch (error) {
    console.error('搜索客户失败:', error)
  }
}

// 重置搜索
const resetSearch = () => {
  supplierSearch.value = {
    supplierCode: '',
    supplierName: '',
    contactPerson: '',
    contactPhone: '',
    supplierType: '',
    isActive: '',
    industry: '',
    mnemonicCode: '',
    sortBy: ''
  }
  pagination.value.currentPage = 1
  searchSuppliers()
}

// 切换页码
const changePage = (page: number) => {
  if (page >= 1 && page <= pagination.value.totalPages) {
    pagination.value.currentPage = page
    searchSuppliers()
  }
}

// 切换每页条数
const changePageSize = (size: number) => {
  pagination.value.pageSize = size
  pagination.value.currentPage = 1
  searchSuppliers()
}

// 新增供应商
const addSupplier = () => {
  supplierPageState.value = 'add'
}

// 返回供应商列表
const backToList = () => {
  supplierPageState.value = 'list'
}

// 提交新增供应商
const submitSupplier = async () => {
  try {
    // 验证必填字段
    if (!newSupplier.value.supplierName || !newSupplier.value.contactPerson || !newSupplier.value.contactPhone) {
      alert('请填写必填字段：供应商名称、负责人姓名、负责人手机号')
      return
    }

    const response = await api.supplier.create(newSupplier.value)
    if (response.data.code === 200) {
      alert('供应商新增成功！')
      // 重置表单
      newSupplier.value = {
        supplierCode: '',
        supplierName: '',
        contactPerson: '',
        contactPhone: '',
        contactIdNumber: '',
        address: '',
        industry: '',
        creditCode: '',
        memo: '',
        supplierType: '企业',
        mnemonicCode: '',
        servicePersonnel: '',
        salesperson: '',
        supplierAttributes: '',
        belongsToUnit: '',
        market: '',
        isActive: true
      }
      // 返回列表并刷新数据
      backToList()
      searchSuppliers()
    } else {
      alert(`新增失败: ${response.data.msg}`)
    }
  } catch (error) {
    console.error('新增供应商失败:', error)
    alert('新增供应商失败')
  }
}

// 初始化百度地图
const initMap = async () => {
  try {
    console.log('开始初始化地图...')
    mapLoaded.value = false
    
    // 等待更长时间确保DOM完全稳定
    await new Promise(resolve => setTimeout(resolve, 500))
    
    const mapContainer = document.getElementById('map-container')
    if (!mapContainer) {
      console.error('地图容器不存在')
      return
    }
    
    // 强制设置容器尺寸和样式
    mapContainer.style.width = '100%'
    mapContainer.style.height = '300px'
    mapContainer.style.display = 'block'
    mapContainer.style.visibility = 'visible'
    mapContainer.style.opacity = '1'
    
    // 等待样式应用
    await new Promise(resolve => setTimeout(resolve, 200))
    
    if (typeof (window as any).BMap === 'undefined') {
      console.log('百度地图API未加载，开始加载...')
      await loadBaiduMapAPI()
    }
    
    const BMap = (window as any).BMap
    if (!BMap) {
      console.error('百度地图API加载失败')
      return
    }
    
    console.log('创建地图实例...')
    
    // 简单直接的方法：直接使用原容器
    mapContainer.innerHTML = '<div id="baidu-map" style="width:100%;height:100%;"></div>'
    
    // 等待DOM更新
    await new Promise(resolve => setTimeout(resolve, 100))
    
    // 创建地图实例
    map = new BMap.Map('baidu-map')
    
    const point = new BMap.Point(116.404, 39.915)
    map.centerAndZoom(point, 12)
    
    console.log('地图创建成功，添加控件...')
    
    map.addControl(new BMap.NavigationControl())
    map.addControl(new BMap.ScaleControl())
    map.addControl(new BMap.OverviewMapControl())
    map.addControl(new BMap.MapTypeControl())
    
    localSearch = new BMap.LocalSearch(map, {
      onSearchComplete: (results: any) => {
        if (localSearch.getStatus() === 0) {
          const pois = results.getPoi(0)
          if (pois) {
            const point = pois.point
            map.centerAndZoom(point, 15)
            
            map.clearOverlays()
            const marker = new BMap.Marker(point)
            map.addOverlay(marker)
            
            // 设置选中的地址
            selectedAddress.value = pois.title + ' - ' + pois.address
            mapAddress.value = pois.title + ' - ' + pois.address
            
            const infoWindow = new BMap.InfoWindow(pois.title + '<br/>' + pois.address)
            marker.addEventListener('click', () => {
              map.openInfoWindow(infoWindow, point)
            })
          }
        }
      }
    })
    
    map.addEventListener('click', (e: any) => {
      const point = e.point
      map.clearOverlays()
      
      const marker = new BMap.Marker(point)
      map.addOverlay(marker)
      
      const geoc = new BMap.Geocoder()
      geoc.getLocation(point, (result: any) => {
        if (result) {
          selectedAddress.value = result.address
          mapAddress.value = result.address
          console.log('点击地图选择地址:', result.address)
          console.log('当前状态:', { selectedAddress: selectedAddress.value, mapAddress: mapAddress.value })
        } else {
          console.log('地理编码失败，无法获取地址')
        }
      })
    })
    
    console.log('地图初始化完成')
    mapLoaded.value = true
    
    // 确保按钮事件正常工作
    await nextTick()
    console.log('地图初始化完成，按钮应该可以正常使用')
  } catch (error) {
    console.error('地图初始化失败:', error)
    mapLoaded.value = false
  }
}

// 加载百度地图API
const loadBaiduMapAPI = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    if (typeof (window as any).BMap !== 'undefined') {
      console.log('百度地图API已存在')
      resolve()
      return
    }
    
    console.log('开始加载百度地图API...')
    
    // 检查是否已有加载中的脚本
    const existingScript = document.querySelector('script[src*="api.map.baidu.com"]')
    if (existingScript) {
      console.log('百度地图API脚本已存在，等待加载...')
      const checkInterval = setInterval(() => {
        if (typeof (window as any).BMap !== 'undefined') {
          clearInterval(checkInterval)
          console.log('百度地图API加载完成')
          resolve()
        }
      }, 100)
      
      setTimeout(() => {
        clearInterval(checkInterval)
        console.error('百度地图API加载超时')
        reject(new Error('百度地图API加载超时'))
      }, 15000)
      return
    }
    
    const callbackName = 'initBaiduMap_' + Date.now()
    ;(window as any)[callbackName] = () => {
      console.log('百度地图API加载成功')
      resolve()
      delete (window as any)[callbackName]
    }
    
    const script = document.createElement('script')
    script.src = `https://api.map.baidu.com/api?v=3.0&ak=${AK}&callback=${callbackName}`
    script.onerror = (error) => {
      console.error('百度地图API加载失败:', error)
      reject(error)
    }
    
    script.onload = () => {
      console.log('百度地图API脚本加载完成')
    }
    
    document.head.appendChild(script)
    console.log('百度地图API脚本已添加到页面')
  })
}

// 打开地图选择
const openMapDialog = () => {
  showMapDialog.value = true
  mapLoaded.value = false
  selectedAddress.value = ''
  mapAddress.value = ''
  
  // 使用更长的延迟确保DOM完全稳定
  setTimeout(() => {
    initMap()
  }, 1000)
}

// 关闭地图选择
const closeMapDialog = () => {
  console.log('=== 关闭地图按钮被点击 ===')
  showMapDialog.value = false
  selectedAddress.value = ''
  mapAddress.value = ''
  mapLoaded.value = false
  
  // 清理地图实例
  if (map) {
    try {
      map.clearOverlays()
      map = null
    } catch (error) {
      console.error('清理地图实例失败:', error)
    }
  }
  
  // 清理地图容器
  const mapContainer = document.getElementById('map-container')
  if (mapContainer) {
    mapContainer.innerHTML = ''
  }
}



// 确认地址选择
const confirmAddress = () => {
  console.log('=== 确认选择按钮被点击 ===')
  console.log('确认选择地址:', { selectedAddress: selectedAddress.value, mapAddress: mapAddress.value })
  
  // 优先使用选中的地址，其次使用搜索框的地址
  const finalAddress = selectedAddress.value || mapAddress.value.trim()
  
  if (finalAddress) {
    newSupplier.value.address = finalAddress
    console.log('使用地址:', finalAddress)
    closeMapDialog()
  } else {
    alert('请先选择一个地址或输入地址进行搜索')
  }
}

// 搜索地址
const searchAddress = () => {
  if (!mapAddress.value.trim()) {
    alert('请输入地址进行搜索')
    return
  }
  
  if (localSearch) {
    localSearch.search(mapAddress.value)
    console.log('搜索地址:', mapAddress.value)
  }
}

// 客户地图相关函数
// 打开客户地图选择
const openCustomerMapDialog = () => {
  showCustomerMapDialog.value = true
  customerMapLoaded.value = false
  customerSelectedAddress.value = ''
  customerMapAddress.value = ''
  
  // 使用更长的延迟确保DOM完全稳定
  setTimeout(() => {
    initCustomerMap()
  }, 1000)
}

// 关闭客户地图选择
const closeCustomerMapDialog = () => {
  console.log('=== 关闭客户地图按钮被点击 ===')
  showCustomerMapDialog.value = false
  customerSelectedAddress.value = ''
  customerMapAddress.value = ''
  customerMapLoaded.value = false
  
  // 清理地图实例
  if (customerMap) {
    try {
      customerMap.clearOverlays()
      customerMap = null
    } catch (error) {
      console.error('清理客户地图实例失败:', error)
    }
  }
  
  // 清理地图容器
  const mapContainer = document.getElementById('customer-map-container')
  if (mapContainer) {
    mapContainer.innerHTML = ''
  }
}

// 初始化客户地图
const initCustomerMap = async () => {
  try {
    console.log('开始初始化客户地图...')
    customerMapLoaded.value = false

    // 等待更长时间确保DOM完全稳定
    await new Promise(resolve => setTimeout(resolve, 500))

    const mapContainer = document.getElementById('customer-map-container')
    if (!mapContainer) {
      console.error('客户地图容器不存在')
      return
    }

    // 强制设置容器尺寸和样式
    mapContainer.style.width = '100%'
    mapContainer.style.height = '300px'
    mapContainer.style.display = 'block'
    mapContainer.style.visibility = 'visible'
    mapContainer.style.opacity = '1'

    // 等待样式应用
    await new Promise(resolve => setTimeout(resolve, 200))

    if (typeof (window as any).BMap === 'undefined') {
      console.log('百度地图API未加载，开始加载...')
      await loadBaiduMapAPI()
    }

    const BMap = (window as any).BMap
    if (!BMap) {
      console.error('百度地图API加载失败')
      return
    }

    console.log('创建客户地图实例...')

    // 简单直接的方法：直接使用原容器
    mapContainer.innerHTML = '<div id="customer-baidu-map" style="width:100%;height:100%;"></div>'

    // 等待DOM更新
    await new Promise(resolve => setTimeout(resolve, 100))

    // 创建地图实例
    customerMap = new BMap.Map('customer-baidu-map')

    const point = new BMap.Point(116.404, 39.915)
    customerMap.centerAndZoom(point, 12)

    console.log('客户地图创建成功，添加控件...')

    customerMap.addControl(new BMap.NavigationControl())
    customerMap.addControl(new BMap.ScaleControl())
    customerMap.addControl(new BMap.OverviewMapControl())
    customerMap.addControl(new BMap.MapTypeControl())

    customerLocalSearch = new BMap.LocalSearch(customerMap, {
      onSearchComplete: (results: any) => {
        if (customerLocalSearch.getStatus() === 0) {
          const pois = results.getPoi(0)
          if (pois) {
            const point = pois.point
            customerMap.centerAndZoom(point, 15)

            customerMap.clearOverlays()
            const marker = new BMap.Marker(point)
            customerMap.addOverlay(marker)

            // 设置选中的地址
            customerSelectedAddress.value = pois.title + ' - ' + pois.address
            customerMapAddress.value = pois.title + ' - ' + pois.address // Update search box
            const infoWindow = new BMap.InfoWindow(pois.title + '<br/>' + pois.address)
            marker.addEventListener('click', () => {
              customerMap.openInfoWindow(infoWindow, point)
            })
          }
        }
      }
    })

    customerMap.addEventListener('click', (e: any) => {
      const point = e.point
      customerMap.clearOverlays()

      const marker = new BMap.Marker(point)
      customerMap.addOverlay(marker)

      const geoc = new BMap.Geocoder()
      geoc.getLocation(point, (result: any) => {
        if (result) {
          customerSelectedAddress.value = result.address
          customerMapAddress.value = result.address // Update search box
          console.log('点击客户地图选择地址:', result.address)
          console.log('当前客户状态:', { selectedAddress: customerSelectedAddress.value, mapAddress: customerMapAddress.value })
        } else {
          console.log('客户地理编码失败，无法获取地址')
        }
      })
    })

    console.log('客户地图初始化完成')
    customerMapLoaded.value = true
  } catch (error) {
    console.error('客户地图初始化失败:', error)
    customerMapLoaded.value = false
  }
}

// 搜索客户地址
const searchCustomerAddress = () => {
  if (!customerMapAddress.value.trim()) {
    alert('请输入地址进行搜索')
    return
  }
  
  if (customerLocalSearch) {
    customerLocalSearch.search(customerMapAddress.value)
    console.log('搜索客户地址:', customerMapAddress.value)
  }
}

// 确认客户地址选择
const confirmCustomerAddress = () => {
  console.log('=== 确认客户地址选择按钮被点击 ===')
  console.log('确认选择客户地址:', { selectedAddress: customerSelectedAddress.value, mapAddress: customerMapAddress.value })
  
  // 优先使用选中的地址，其次使用搜索框的地址
  const finalAddress = customerSelectedAddress.value || customerMapAddress.value.trim()
  
  if (finalAddress) {
    newCustomer.value.address = finalAddress
    console.log('使用客户地址:', finalAddress)
    closeCustomerMapDialog()
  } else {
    alert('请先选择一个地址或输入地址进行搜索')
  }
}

// 导入导出
const importExport = () => {
  alert('导入导出功能开发中...')
}

// 初始化测试数据
const initTestData = async () => {
  try {
    const response = await api.supplier.initTestData()
    if (response.data.code === 200) {
      alert('测试数据初始化成功！')
      searchSuppliers() // 重新加载数据
    } else {
      alert(`初始化失败: ${response.data.msg}`)
    }
  } catch (error) {
    console.error('初始化测试数据失败:', error)
    alert('初始化测试数据失败')
  }
}

// 客户管理相关方法
// 重置客户搜索
const resetCustomerSearch = () => {
  customerSearch.value = {
    customerCode: '',
    customerName: '',
    contactPerson: '',
    contactPhone: '',
    customerType: '',
    isActive: '',
    industry: '',
    mnemonicCode: '',
    market: '',
    customerStage: '',
    customTags: '',
    hasCollectionArchives: '',
    sortBy: ''
  }
  customerPagination.value.currentPage = 1
  searchCustomers()
}

// 切换客户页码
const changeCustomerPage = (page: number) => {
  if (page >= 1 && page <= customerPagination.value.totalPages) {
    customerPagination.value.currentPage = page
    searchCustomers()
  }
}

// 新增客户
const addCustomer = () => {
  customerPageState.value = 'add'
}

// 查看客户
const viewCustomer = async (customer: any) => {
  try {
    const response = await api.customer.getById(customer.id)
    if (response.data.code === 200) {
      customerDetail.value = response.data.data
      customerPageState.value = 'detail'
    } else {
      alert(`获取客户详情失败: ${response.data.msg}`)
    }
  } catch (error) {
    console.error('获取客户详情失败:', error)
    alert('获取客户详情失败')
  }
}

// 编辑客户
const editCustomer = (customer: any) => {
  console.log('编辑客户:', customer)
  alert(`编辑客户: ${customer.customerName}`)
}

// 删除客户
const deleteCustomer = async (customer: any) => {
  if (confirm(`确定要删除客户"${customer.customerName}"吗？`)) {
    try {
      const response = await api.customer.delete(customer.id)
      if (response.data.code === 200) {
        alert('删除成功')
        searchCustomers()
      } else {
        alert('删除失败: ' + response.data.msg)
      }
    } catch (error) {
      console.error('删除客户失败:', error)
      alert('删除失败')
    }
  }
}

// 返回客户列表
const backToCustomerList = () => {
  customerPageState.value = 'list'
}

// 提交新增客户
const submitCustomer = async () => {
  try {
    // 验证必填字段
    if (!newCustomer.value.customerName || !newCustomer.value.contactPerson || !newCustomer.value.contactPhone) {
      alert('请填写必填字段：客户名称、联系人姓名、联系电话')
      return
    }

    const response = await api.customer.create(newCustomer.value)
    if (response.data.code === 200) {
      alert('客户新增成功！')
      // 重置表单
      newCustomer.value = {
        customerCode: '',
        customerName: '',
        contactPerson: '',
        contactPhone: '',
        contactIdNumber: '',
        address: '',
        industry: '',
        creditCode: '',
        memo: '',
        customerType: '',
        mnemonicCode: '',
        customerStage: '',
        customTags: '',
        purchaseIntent: '',
        collectionArchives: '',
        belongsToUnit: '',
        market: '',
        isActive: true,
        hasCollectionArchives: false
      }
      // 返回列表并刷新数据
      backToCustomerList()
      searchCustomers()
    } else {
      alert(`新增失败: ${response.data.msg}`)
    }
  } catch (error) {
    console.error('新增客户失败:', error)
    alert('新增客户失败')
  }
}

// 查看供应商
const viewSupplier = async (supplier: any) => {
  try {
    const response = await api.supplier.getById(supplier.id)
    if (response.data.code === 200) {
      supplierDetail.value = response.data.data
      supplierPageState.value = 'detail'
    } else {
      alert(`获取供应商详情失败: ${response.data.msg}`)
    }
  } catch (error) {
    console.error('获取供应商详情失败:', error)
    alert('获取供应商详情失败')
  }
}

// 编辑供应商
const editSupplier = (supplier: any) => {
  alert(`编辑供应商: ${supplier.supplierName}`)
}

// 删除供应商
const deleteSupplier = (supplier: any) => {
  if (confirm(`确定要删除供应商 "${supplier.supplierName}" 吗？`)) {
    alert('删除功能开发中...')
  }
}

// 退出登录
const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  router.push('/login')
}

// 获取用户信息
const getUserInfo = () => {
  const token = localStorage.getItem('token')
  if (token) {
    try {
      const decodedToken = decodeURIComponent(atob(token))
      userInfo.value = JSON.parse(decodedToken)
    } catch (error) {
      console.error('解析用户信息失败:', error)
      router.push('/login')
    }
  } else {
    router.push('/login')
  }
}

// 格式化日期
const formatDate = (timestamp: string) => {
  if (!timestamp) return '-'
  
  try {
    const date = new Date(timestamp)
    
    // 检查日期是否有效
    if (isNaN(date.getTime())) {
      return '-'
    }
    
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}`
  } catch (error) {
    console.error('日期格式化失败:', error, timestamp)
    return '-'
  }
}

onMounted(() => {
  getUserInfo()
})
</script>

<template>
  <div class="home-container">
    <!-- 头部 -->
    <header class="header">
      <div class="header-content">
        <h1>智慧农业管理系统</h1>
        <div class="user-info">
          <span>欢迎，{{ userInfo?.username || '用户' }}</span>
          <button @click="logout" class="logout-btn">退出登录</button>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <div class="main-layout">
      <!-- 左侧菜单栏 -->
      <aside class="sidebar">
        <nav class="menu">
          <div class="menu-item" :class="{ active: currentPage === 'dashboard' }" @click="switchPage('dashboard')">
            <span>仪表盘</span>
          </div>
          <div class="menu-item" :class="{ active: currentPage === 'supplier' }" @click="switchPage('supplier')">
            <span>供应商管理</span>
          </div>
          <div class="menu-item" :class="{ active: currentPage === 'customer' }" @click="switchPage('customer')">
            <span>客户管理</span>
          </div>
          <div class="menu-item" :class="{ active: currentPage === 'sheep-inventory' }" @click="switchPage('sheep-inventory')">
            <span>羊场存栏统计</span>
          </div>
          <div class="menu-item" :class="{ active: currentPage === 'sheep-realtime' }" @click="switchPage('sheep-realtime')">
            <span>羊场实时存栏</span>
          </div>
          <div class="menu-item" :class="{ active: currentPage === 'lambing-statistics' }" @click="switchPage('lambing-statistics')">
            <span>产羔统计</span>
          </div>
          <div class="menu-item" :class="{ active: currentPage === 'breeding-statistics' }" @click="switchPage('breeding-statistics')">
            <span>种母配怀统计</span>
          </div>
          <div class="menu-item" :class="{ active: currentPage === 'production-statistics' }" @click="switchPage('production-statistics')">
            <span>种母生产统计</span>
          </div>
        </nav>
      </aside>

      <!-- 右侧内容区域 -->
      <main class="content">
        <!-- 仪表盘页面 -->
        <div v-if="currentPage === 'dashboard'" class="dashboard-container">
          <div class="welcome-section">
            <h1 class="welcome-title">欢迎使用智慧农业管理系统</h1>
            <p class="welcome-subtitle">您已成功登录系统,可以开始使用各项功能。</p>
          </div>

          <div class="user-info-card">
            <h3>用户信息</h3>
            <div class="user-info-grid">
              <div class="user-info-item">
                <label>用户名：</label>
                <span>{{ userInfo?.username || 'admin' }}</span>
              </div>
              <div class="user-info-item">
                <label>真实姓名：</label>
                <span>{{ userInfo?.realName || '系统管理员' }}</span>
              </div>
              <div class="user-info-item">
                <label>邮箱：</label>
                <span>{{ userInfo?.email || 'admin@agrismart.com' }}</span>
              </div>
              <div class="user-info-item">
                <label>角色：</label>
                <span>{{ userInfo?.role || '系统管理员' }}</span>
              </div>
              <div class="user-info-item">
                <label>最后登录：</label>
                <span>{{ formatDate(new Date().toISOString()) }}</span>
              </div>
            </div>
          </div>

          <div class="function-modules">
            <div class="module-card">
              <h3>数据监控</h3>
              <p>实时监控农业数据</p>
            </div>
            <div class="module-card">
              <h3>设备管理</h3>
              <p>管理农业设备</p>
            </div>
            <div class="module-card">
              <h3>报表分析</h3>
              <p>查看数据分析报表</p>
            </div>
            <div class="module-card">
              <h3>系统设置</h3>
              <p>配置系统参数</p>
            </div>
          </div>
        </div>

        <!-- 供应商管理页面 -->
        <div v-if="currentPage === 'supplier'" class="page-content">
          <!-- 供应商列表页面 -->
          <div v-if="supplierPageState === 'list'" class="supplier-container">
            <div class="supplier-header">
              <h2>供应商管理</h2>
              <div class="header-actions">
                <button @click="addSupplier" class="add-btn">增加</button>
              </div>
            </div>

            <!-- 搜索表单 -->
            <div class="search-form">
              <div class="search-row">
                <div class="search-item">
                  <label>供应商编号：</label>
                  <input v-model="supplierSearch.supplierCode" placeholder="请输入供应商编号" />
                </div>
                <div class="search-item">
                  <label>供应商名称：</label>
                  <input v-model="supplierSearch.supplierName" placeholder="请输入供应商名称" />
                </div>
                <div class="search-item">
                  <label>联系人姓名：</label>
                  <input v-model="supplierSearch.contactPerson" placeholder="请输入联系人姓名" />
                </div>
              </div>
              <div class="search-row">
                <div class="search-item">
                  <label>联系电话：</label>
                  <input v-model="supplierSearch.contactPhone" placeholder="请输入联系电话" />
                </div>
                <div class="search-item">
                  <label>供应商类型：</label>
                  <select v-model="supplierSearch.supplierType">
                    <option value="">全部</option>
                    <option value="企业">企业</option>
                    <option value="个人">个人</option>
                  </select>
                </div>
                <div class="search-item">
                  <label>使用状态：</label>
                  <select v-model="supplierSearch.isActive">
                    <option value="">全部</option>
                    <option value="true">启用</option>
                    <option value="false">禁用</option>
                  </select>
                </div>
              </div>
              <div class="search-row">
                <div class="search-item">
                  <label>所属行业：</label>
                  <input v-model="supplierSearch.industry" placeholder="请输入所属行业" />
                </div>
                <div class="search-item">
                  <label>助记码：</label>
                  <input v-model="supplierSearch.mnemonicCode" placeholder="请输入助记码" />
                </div>
                <div class="search-item">
                  <label>排序字段：</label>
                  <select v-model="supplierSearch.sortBy">
                    <option value="">默认排序</option>
                    <option value="supplierCode">供应商编号</option>
                    <option value="supplierName">供应商名称</option>
                    <option value="contactPerson">联系人</option>
                    <option value="createdAt">创建时间</option>
                    <option value="updatedAt">更新时间</option>
                  </select>
                </div>
              </div>
              <div class="search-row">
                <div class="search-item">
                  <!-- 占位，保持布局 -->
                </div>
                <div class="search-item">
                  <!-- 占位，保持布局 -->
                </div>
                <div class="search-item">
                  <!-- 占位，保持布局 -->
                </div>
              </div>
              <div class="search-actions">
                <button @click="searchSuppliers" class="search-btn">查询</button>
                <button @click="resetSearch" class="reset-btn">重置</button>
              </div>
            </div>

            <!-- 数据表格 -->
            <div class="table-container">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>供应商编号</th>
                    <th>供应商名称</th>
                    <th>联系人</th>
                    <th>联系电话</th>
                    <th>供应商类型</th>
                    <th>所属行业</th>
                    <th>归属单位</th>
                    <th>使用状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="supplier in suppliers" :key="supplier.id">
                    <td>{{ supplier.supplierCode }}</td>
                    <td>{{ supplier.supplierName }}</td>
                    <td>{{ supplier.contactPerson }}</td>
                    <td>{{ supplier.contactPhone }}</td>
                    <td>{{ supplier.supplierType }}</td>
                    <td>{{ supplier.industry }}</td>
                    <td>{{ supplier.belongsToUnit }}</td>
                    <td>
                      <span :class="supplier.isActive ? 'status-active' : 'status-inactive'">
                        {{ supplier.isActive ? '启用' : '禁用' }}
                      </span>
                    </td>
                    <td>
                      <button @click="viewSupplier(supplier)" class="action-btn view-btn">查看</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- 分页 -->
            <div class="pagination">
              <div class="pagination-info">
                共 {{ pagination.total }} 条记录，当前第 {{ pagination.currentPage }} 页
              </div>
              <div class="pagination-controls">
                <button 
                  @click="changePage(pagination.currentPage - 1)" 
                  :disabled="pagination.currentPage <= 1"
                  class="page-btn"
                >
                  上一页
                </button>
                <span class="page-info">{{ pagination.currentPage }} / {{ pagination.totalPages }}</span>
                <button 
                  @click="changePage(pagination.currentPage + 1)" 
                  :disabled="pagination.currentPage >= pagination.totalPages"
                  class="page-btn"
                >
                  下一页
                </button>
                <div class="page-size-options">
                  <span 
                    v-for="size in [10, 15, 20, 50, 100]" 
                    :key="size"
                    :class="['page-size-option', { active: pagination.pageSize === size }]"
                    @click="changePageSize(size)"
                  >
                    {{ size }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 新增供应商页面 -->
          <div v-if="supplierPageState === 'add'" class="add-supplier-container">
            <div class="add-supplier-header">
              <h2>新增供应商</h2>
              <button @click="backToList" class="back-btn">返回</button>
            </div>

            <div class="add-supplier-form">
              <div class="form-row">
                <div class="form-item">
                  <label>供应商编号：</label>
                  <input v-model="newSupplier.supplierCode" placeholder="请输入供应商编号" />
                  <div class="field-tip">示例：SP001、SP002</div>
                </div>
                <div class="form-item">
                  <label>供应商名称：</label>
                  <input v-model="newSupplier.supplierName" placeholder="请输入供应商名称" />
                  <div class="field-tip">示例：北京农业科技有限公司</div>
                </div>
                <div class="form-item">
                  <label>负责人姓名：</label>
                  <input v-model="newSupplier.contactPerson" placeholder="请输入负责人姓名" />
                  <div class="field-tip">示例：张三、李四</div>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item">
                  <label>负责人手机号：</label>
                  <input v-model="newSupplier.contactPhone" placeholder="请输入负责人手机号" />
                  <div class="field-tip">示例：13800138001</div>
                </div>
                <div class="form-item">
                  <label>身份证号：</label>
                  <input v-model="newSupplier.contactIdNumber" placeholder="请输入身份证号" />
                  <div class="field-tip">示例：110101199001011234</div>
                </div>
                <div class="form-item">
                  <label>供应商类型：</label>
                  <select v-model="newSupplier.supplierType">
                    <option value="企业">企业</option>
                    <option value="个人">个人</option>
                  </select>
                  <div class="field-tip">选择供应商类型</div>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item">
                  <label>地址：</label>
                  <div class="address-input-group">
                    <input v-model="newSupplier.address" placeholder="请输入地址" />
                    <button @click="openMapDialog" type="button" class="map-btn">地图定位</button>
                  </div>
                  <div class="field-tip">示例：北京市朝阳区农业路123号</div>
                </div>
                <div class="form-item">
                  <label>所属行业：</label>
                  <input v-model="newSupplier.industry" placeholder="请输入所属行业" />
                  <div class="field-tip">示例：农业科技、农产品供应</div>
                </div>
                <div class="form-item">
                  <label>统一社会信用代码：</label>
                  <input v-model="newSupplier.creditCode" placeholder="请输入统一社会信用代码" />
                  <div class="field-tip">示例：91110105MA00123456</div>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item">
                  <label>助记码：</label>
                  <input v-model="newSupplier.mnemonicCode" placeholder="请输入助记码" />
                  <div class="field-tip">示例：BJNY（北京农业）</div>
                </div>
                <div class="form-item">
                  <label>服务人员：</label>
                  <input v-model="newSupplier.servicePersonnel" placeholder="请输入服务人员" />
                  <div class="field-tip">示例：李四、王五</div>
                </div>
                <div class="form-item">
                  <label>业务员：</label>
                  <input v-model="newSupplier.salesperson" placeholder="请输入业务员" />
                  <div class="field-tip">示例：张三、赵六</div>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item">
                  <label>供应商属性：</label>
                  <input v-model="newSupplier.supplierAttributes" placeholder="请输入供应商属性" />
                  <div class="field-tip">示例：优质供应商、稳定供应商</div>
                </div>
                <div class="form-item">
                  <label>归属单位：</label>
                  <input v-model="newSupplier.belongsToUnit" placeholder="请输入归属单位" />
                  <div class="field-tip">示例：北京分公司、上海分公司</div>
                </div>
                <div class="form-item">
                  <label>所属市场：</label>
                  <input v-model="newSupplier.market" placeholder="请输入所属市场" />
                  <div class="field-tip">示例：华北市场、华东市场</div>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item">
                  <label>备注：</label>
                  <textarea v-model="newSupplier.memo" placeholder="请输入备注信息" rows="3"></textarea>
                  <div class="field-tip">示例：主要供应商，服务良好</div>
                </div>
                <div class="form-item">
                  <label>
                    <input type="checkbox" v-model="newSupplier.isActive" />
                    启用状态
                  </label>
                  <div class="field-tip">勾选表示启用该供应商</div>
                </div>
              </div>
              <div class="form-actions">
                <button @click="submitSupplier" class="submit-btn">提交</button>
                <button @click="backToList" class="cancel-btn">取消</button>
              </div>
            </div>
          </div>

          <!-- 供应商详情页面 -->
          <div v-if="supplierPageState === 'detail'" class="supplier-detail-container">
            <div class="supplier-detail-header">
              <h2>供应商详情</h2>
              <button @click="backToList" class="back-btn">返回</button>
            </div>

            <div v-if="supplierDetail" class="supplier-detail-content">
              <div class="detail-section">
                <h3>基本信息</h3>
                <div class="detail-grid">
                  <div class="detail-item">
                    <label>供应商编号：</label>
                    <span>{{ supplierDetail.supplierCode }}</span>
                  </div>
                  <div class="detail-item">
                    <label>供应商名称：</label>
                    <span>{{ supplierDetail.supplierName }}</span>
                  </div>
                  <div class="detail-item">
                    <label>负责人姓名：</label>
                    <span>{{ supplierDetail.contactPerson }}</span>
                  </div>
                  <div class="detail-item">
                    <label>负责人手机号：</label>
                    <span>{{ supplierDetail.contactPhone }}</span>
                  </div>
                  <div class="detail-item">
                    <label>身份证号：</label>
                    <span>{{ supplierDetail.contactIdNumber }}</span>
                  </div>
                  <div class="detail-item">
                    <label>供应商类型：</label>
                    <span>{{ supplierDetail.supplierType }}</span>
                  </div>
                </div>
              </div>

              <div class="detail-section">
                <h3>联系信息</h3>
                <div class="detail-grid">
                  <div class="detail-item">
                    <label>地址：</label>
                    <span>{{ supplierDetail.address }}</span>
                  </div>
                  <div class="detail-item">
                    <label>所属行业：</label>
                    <span>{{ supplierDetail.industry }}</span>
                  </div>
                  <div class="detail-item">
                    <label>统一社会信用代码：</label>
                    <span>{{ supplierDetail.creditCode }}</span>
                  </div>
                </div>
              </div>

              <div class="detail-section">
                <h3>业务信息</h3>
                <div class="detail-grid">
                  <div class="detail-item">
                    <label>助记码：</label>
                    <span>{{ supplierDetail.mnemonicCode }}</span>
                  </div>
                  <div class="detail-item">
                    <label>服务人员：</label>
                    <span>{{ supplierDetail.servicePersonnel }}</span>
                  </div>
                  <div class="detail-item">
                    <label>业务员：</label>
                    <span>{{ supplierDetail.salesperson }}</span>
                  </div>
                  <div class="detail-item">
                    <label>供应商属性：</label>
                    <span>{{ supplierDetail.supplierAttributes }}</span>
                  </div>
                  <div class="detail-item">
                    <label>归属单位：</label>
                    <span>{{ supplierDetail.belongsToUnit }}</span>
                  </div>
                  <div class="detail-item">
                    <label>所属市场：</label>
                    <span>{{ supplierDetail.market }}</span>
                  </div>
                  <div class="detail-item">
                    <label>使用状态：</label>
                    <span :class="supplierDetail.isActive ? 'status-active' : 'status-inactive'">
                      {{ supplierDetail.isActive ? '启用' : '禁用' }}
                    </span>
                  </div>
                </div>
              </div>

              <div class="detail-section">
                <h3>备注信息</h3>
                <div class="detail-item full-width">
                  <label>备注：</label>
                  <span>{{ supplierDetail.memo }}</span>
                </div>
              </div>

              <div class="detail-section">
                <h3>时间信息</h3>
                <div class="detail-grid">
                  <div class="detail-item">
                    <label>创建时间：</label>
                    <span>{{ formatDate(supplierDetail.createdAt) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>更新时间：</label>
                    <span>{{ formatDate(supplierDetail.updatedAt) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 羊场存栏统计页面 -->
        <div v-if="currentPage === 'sheep-inventory'" class="page-content">
          <div class="sheep-inventory-container">
            <div class="inventory-header">
              <h2>羊场存栏统计</h2>
              <div class="header-actions">
                <button @click="refreshSheepData" class="refresh-btn">刷新数据</button>
                <div class="export-group">
                  <select v-model="sheepExportFormat" class="export-format-select">
                    <option value="excel">Excel格式</option>
                    <option value="csv">CSV格式</option>
                  </select>
                  <button @click="exportSheepData" class="export-btn">导出报表</button>
                </div>
              </div>
            </div>

            <!-- 筛选条件 -->
            <div class="filter-section">
              <div class="filter-row">
                <div class="filter-item">
                  <label>羊场选择：</label>
                  <select v-model="sheepFilterParams.farmId" @change="handleSheepFilterChange">
                    <option value="">全部羊场</option>
                    <option v-for="farm in sheepFarms" :key="farm.farmId" :value="farm.farmId">
                      {{ farm.farmName }}
                    </option>
                  </select>
                </div>
                <div class="filter-item">
                  <label>开始日期：</label>
                  <input 
                    type="date" 
                    v-model="sheepFilterParams.startDate" 
                    @change="handleSheepFilterChange"
                  />
                </div>
                <div class="filter-item">
                  <label>结束日期：</label>
                  <input 
                    type="date" 
                    v-model="sheepFilterParams.endDate" 
                    @change="handleSheepFilterChange"
                  />
                </div>
              </div>
              <div class="filter-actions">
                <button @click="searchSheepData" class="search-btn">查询</button>
                <button @click="resetSheepFilter" class="reset-btn">重置</button>
              </div>
            </div>

            <!-- 统计概览 -->
            <div class="overview-section">
              <div class="overview-card">
                <div class="overview-title">总存栏数</div>
                <div class="overview-value">{{ sheepInventoryData.totalCount || 0 }}</div>
                <div class="overview-unit">只</div>
              </div>
              <div class="overview-card">
                <div class="overview-title">品种数量</div>
                <div class="overview-value">{{ sheepInventoryData.breedStatistics?.length || 0 }}</div>
                <div class="overview-unit">种</div>
              </div>
              <div class="overview-card">
                <div class="overview-title">公羊数量</div>
                <div class="overview-value">{{ sheepMaleCount }}</div>
                <div class="overview-unit">只</div>
              </div>
              <div class="overview-card">
                <div class="overview-title">母羊数量</div>
                <div class="overview-value">{{ sheepFemaleCount }}</div>
                <div class="overview-unit">只</div>
              </div>
            </div>

            <!-- 图表展示 -->
            <div class="charts-section">
              <div class="chart-container">
                <div class="chart-title">品种分布</div>
                <div class="chart-content">
                  <div v-if="sheepInventoryData.breedStatistics && sheepInventoryData.breedStatistics.length > 0" class="breed-list">
                    <div 
                      v-for="breed in sheepInventoryData.breedStatistics" 
                      :key="breed.breed" 
                      class="breed-item"
                    >
                      <div class="breed-name">{{ breed.breed }}</div>
                      <div class="breed-bar">
                        <div 
                          class="breed-bar-fill" 
                          :style="{ width: breed.percentage + '%' }"
                        ></div>
                      </div>
                      <div class="breed-count">{{ breed.count }}只 ({{ breed.percentage }}%)</div>
                    </div>
                  </div>
                  <div v-else class="no-data">暂无数据</div>
                </div>
              </div>

              <div class="chart-container">
                <div class="chart-title">性别分布</div>
                <div class="chart-content">
                  <div class="gender-stats">
                    <div class="gender-item">
                      <div class="gender-icon male">♂</div>
                      <div class="gender-info">
                        <div class="gender-label">公羊</div>
                        <div class="gender-count">{{ sheepMaleCount }}只</div>
                      </div>
                    </div>
                    <div class="gender-item">
                      <div class="gender-icon female">♀</div>
                      <div class="gender-info">
                        <div class="gender-label">母羊</div>
                        <div class="gender-count">{{ sheepFemaleCount }}只</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 详细数据表格 -->
            <div class="table-section">
              <div class="table-header">
                <h3>详细统计</h3>
                <div class="table-actions">
                  <select v-model="sheepTableSortBy" @change="handleSheepSortChange">
                    <option value="">默认排序</option>
                    <option value="breed">按品种</option>
                    <option value="count">按数量</option>
                    <option value="percentage">按比例</option>
                  </select>
                </div>
              </div>
              
              <div class="table-container">
                <table class="data-table">
                  <thead>
                    <tr>
                      <th>品种</th>
                      <th>数量</th>
                      <th>比例</th>
                      <th>公羊数量</th>
                      <th>母羊数量</th>
                      <th>平均年龄</th>
                      <th>健康状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="breed in sortedSheepBreedStatistics" :key="breed.breed">
                      <td>{{ breed.breed }}</td>
                      <td>{{ breed.count }}</td>
                      <td>{{ breed.percentage }}%</td>
                      <td>{{ breed.maleCount || 0 }}</td>
                      <td>{{ breed.femaleCount || 0 }}</td>
                      <td>{{ breed.avgAge ? Math.round(breed.avgAge * 10) / 10 + '岁' : '--' }}</td>
                      <td>
                        <span :class="getSheepHealthStatusClass(breed.healthStatus)">
                          {{ breed.healthStatus || '正常' }}
                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="sheepLoading" class="loading-overlay">
              <div class="loading-spinner"></div>
              <div class="loading-text">加载中...</div>
            </div>
          </div>
        </div>

        <!-- 羊场实时存栏页面 -->
        <div v-if="currentPage === 'sheep-realtime'" class="page-content">
          <div class="sheep-realtime-container">
            <!-- 页面头部 -->
            <div class="sheep-realtime-header">
              <h2>羊场实时存栏</h2>
              <div class="header-actions">
                <button @click="refreshSheepRealtimeData" class="refresh-btn">
                  <span>刷新数据</span>
                </button>
              </div>
            </div>

            <!-- 筛选条件 -->
            <div class="sheep-realtime-filters">
              <div class="filter-row">
                <div class="filter-item">
                  <label>羊场选择：</label>
                  <select v-model="sheepRealtimeFilterParams.farmId" @change="handleSheepRealtimeFilterChange">
                    <option value="">全部羊场</option>
                    <option v-for="farm in sheepRealtimeFarms" :key="farm.farmId" :value="farm.farmId">
                      {{ farm.farmName }}
                    </option>
                  </select>
                </div>
                <div class="filter-actions">
                  <button @click="searchSheepRealtimeData" class="search-btn">查询</button>
                  <button @click="resetSheepRealtimeFilter" class="reset-btn">重置</button>
                </div>
              </div>
            </div>

            <!-- 实时存栏概览 -->
            <div class="sheep-realtime-overview">
              <div class="overview-card">
                <div class="card-icon">🐑</div>
                <div class="card-content">
                  <div class="card-title">总存栏数</div>
                  <div class="card-value">{{ sheepRealtimeData.totalInventory || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">⏰</div>
                <div class="card-content">
                  <div class="card-title">最后更新时间</div>
                  <div class="card-value">{{ formatDate(sheepRealtimeData.lastUpdateTime) }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">📊</div>
                <div class="card-content">
                  <div class="card-title">健康状态统计</div>
                  <div class="card-value">{{ sheepRealtimeData.healthStatusStatistics?.length || 0 }} 种状态</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">📍</div>
                <div class="card-content">
                  <div class="card-title">位置统计</div>
                  <div class="card-value">{{ sheepRealtimeData.locationStatistics?.length || 0 }} 个位置</div>
                </div>
              </div>
            </div>

            <!-- 健康状态统计 -->
            <div class="sheep-realtime-section">
              <h3>健康状态统计</h3>
              <div class="health-status-grid">
                <div 
                  v-for="status in sheepRealtimeData.healthStatusStatistics" 
                  :key="status.healthStatus"
                  class="health-status-card"
                  :class="getSheepRealtimeStatusClass(status.status)"
                >
                  <div class="status-header">
                    <span class="status-icon">
                      {{ status.healthStatus === 'Healthy' ? '🟢' : status.healthStatus === 'Sick' ? '🟡' : '🔴' }}
                    </span>
                    <span class="status-name">{{ status.healthStatus === 'Healthy' ? '健康' : status.healthStatus === 'Sick' ? '生病' : '隔离' }}</span>
                  </div>
                  <div class="status-count">{{ status.count }} 只</div>
                  <div class="status-percentage">{{ status.percentage }}%</div>
                  <div class="status-indicator" :class="getSheepRealtimeStatusClass(status.status)">
                    {{ status.status === 'Normal' ? '正常' : status.status === 'Warning' ? '警告' : '严重' }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 位置统计 -->
            <div class="sheep-realtime-section">
              <h3>位置统计</h3>
              <div class="location-pie-chart">
                <div class="pie-chart-container">
                  <canvas ref="pieChartCanvas" width="300" height="300"></canvas>
                  <div class="pie-chart-legend">
                    <div v-for="(location, index) in sheepRealtimeData.locationStatistics" :key="location.locationName" class="legend-item">
                      <div class="legend-color" :style="{ backgroundColor: getPieChartColor(index) }"></div>
                      <div class="legend-text">
                        <div class="legend-name">{{ location.locationName }}</div>
                        <div class="legend-details">
                          <span>{{ location.count }}只 ({{ location.percentage }}%)</span>
                          <span :class="getSheepRealtimeHealthStatusClass(location.healthStatus)">
                            {{ location.healthStatus === 'Healthy' ? '健康' : location.healthStatus === 'Sick' ? '生病' : '隔离' }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="sheepRealtimeLoading" class="loading-overlay">
              <div class="loading-spinner"></div>
              <div class="loading-text">加载中...</div>
            </div>
          </div>
        </div>

        <!-- 产羔统计页面 -->
        <div v-if="currentPage === 'lambing-statistics'" class="page-content">
          <div class="lambing-statistics-container">
            <!-- 页面头部 -->
            <div class="lambing-statistics-header">
              <h2>产羔统计</h2>
              <div class="header-actions">
                <button @click="refreshLambingData" class="refresh-btn">
                  <span>刷新数据</span>
                </button>
              </div>
            </div>

            <!-- 筛选条件 -->
            <div class="lambing-statistics-filters">
              <div class="filter-row">
                <div class="filter-item">
                  <label>羊场选择：</label>
                  <select v-model="lambingFilterParams.farmId" @change="handleLambingFilterChange">
                    <option value="">全部羊场</option>
                    <option v-for="farm in lambingFarms" :key="farm.farmId" :value="farm.farmId">
                      {{ farm.farmName }}
                    </option>
                  </select>
                </div>
                <div class="filter-item">
                  <label>开始日期：</label>
                  <input type="date" v-model="lambingFilterParams.startDate" @change="handleLambingFilterChange" />
                </div>
                <div class="filter-item">
                  <label>结束日期：</label>
                  <input type="date" v-model="lambingFilterParams.endDate" @change="handleLambingFilterChange" />
                </div>
                <div class="filter-item">
                  <label>年份：</label>
                  <select v-model="lambingFilterParams.year" @change="handleLambingFilterChange">
                    <option value="">全部年份</option>
                    <option value="2024">2024年</option>
                    <option value="2023">2023年</option>
                    <option value="2022">2022年</option>
                  </select>
                </div>
                <div class="filter-actions">
                  <button @click="searchLambingData" class="search-btn">查询</button>
                  <button @click="resetLambingFilter" class="reset-btn">重置</button>
                </div>
              </div>
            </div>

            <!-- 基础统计概览 -->
            <div class="lambing-statistics-overview">
              <div class="overview-card">
                <div class="card-icon">🐑</div>
                <div class="card-content">
                  <div class="card-title">总产羔事件</div>
                  <div class="card-value">{{ lambingData.basicStatistics?.totalLambingEvents || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">🐣</div>
                <div class="card-content">
                  <div class="card-title">总产羔数</div>
                  <div class="card-value">{{ lambingData.basicStatistics?.totalLambsBorn || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">✅</div>
                <div class="card-content">
                  <div class="card-title">健羔数量</div>
                  <div class="card-value">{{ lambingData.basicStatistics?.totalHealthyLambs || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">⚠️</div>
                <div class="card-content">
                  <div class="card-title">弱羔数量</div>
                  <div class="card-value">{{ lambingData.basicStatistics?.totalWeakLambs || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">🔴</div>
                <div class="card-content">
                  <div class="card-title">畸形数量</div>
                  <div class="card-value">{{ lambingData.basicStatistics?.totalDeformedLambs || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">⚫</div>
                <div class="card-content">
                  <div class="card-title">木乃伊数量</div>
                  <div class="card-value">{{ lambingData.basicStatistics?.totalMummifiedLambs || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">💔</div>
                <div class="card-content">
                  <div class="card-title">死胎数量</div>
                  <div class="card-value">{{ lambingData.basicStatistics?.totalStillbirths || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">🚫</div>
                <div class="card-content">
                  <div class="card-title">畸胎数量</div>
                  <div class="card-value">{{ lambingData.basicStatistics?.totalAbnormalFetus || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">📊</div>
                <div class="card-content">
                  <div class="card-title">分娩头数</div>
                  <div class="card-value">{{ lambingData.basicStatistics?.totalBirthCount || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">📈</div>
                <div class="card-content">
                  <div class="card-title">存活率</div>
                  <div class="card-value">{{ lambingData.basicStatistics?.survivalRate || 0 }}%</div>
                </div>
              </div>
            </div>

            <!-- 月度统计 -->
            <div class="lambing-statistics-section">
              <h3>月产羔结构</h3>
              <div class="monthly-stats-container">
                <!-- 筛选条件 -->
                <div class="chart-filter">
                  <label>年份：</label>
                  <select v-model="lambingFilterParams.year" @change="handleLambingFilterChange">
                    <option value="">全部年份</option>
                    <option value="2024">2024年</option>
                    <option value="2023">2023年</option>
                    <option value="2022">2022年</option>
                  </select>
                  <button @click="searchLambingData" class="query-btn">查询</button>
                </div>
                
                <!-- 图表容器 -->
                <div class="chart-container">
                  <div id="lambingChart" class="lambing-chart"></div>
                </div>
                
                <!-- 数据表格 -->
                <div class="monthly-stats-table">
                  <table>
                    <thead>
                      <tr>
                        <th>月份</th>
                        <th>健羔</th>
                        <th>弱羔</th>
                        <th>畸形</th>
                        <th>木乃伊</th>
                        <th>死胎</th>
                        <th>畸胎</th>
                        <th>分娩头数</th>
                        <th>平均产羔只数</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="month in lambingData.monthlyStatistics" :key="month.period">
                        <td>{{ month.monthName }}</td>
                        <td>{{ month.healthyLambs }}</td>
                        <td>{{ month.weakLambs }}</td>
                        <td>{{ month.deformedLambs }}</td>
                        <td>{{ month.mummifiedLambs }}</td>
                        <td>{{ month.stillbirths }}</td>
                        <td>{{ month.abnormalFetus }}</td>
                        <td>{{ month.birthCount }}</td>
                        <td>{{ month.averageLambsPerLambing }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <!-- 产羔类型统计 -->
            <div class="lambing-statistics-section">
              <h3>产羔类型统计</h3>
              <div class="lambing-type-stats">
                <div 
                  v-for="type in lambingData.lambingTypeStatistics" 
                  :key="type.lambingType"
                  class="lambing-type-card"
                >
                  <div class="type-header">
                    <span class="type-name">{{ getLambingTypeChinese(type.lambingType) }}</span>
                    <span class="type-count">{{ type.count }} 次</span>
                  </div>
                  <div class="type-details">
                    <div class="detail-item">
                      <span class="label">占比：</span>
                      <span class="value">{{ type.percentage }}%</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">总羔羊：</span>
                      <span class="value">{{ type.totalLambs }} 只</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">存活羔羊：</span>
                      <span class="value">{{ type.liveLambs }} 只</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">存活率：</span>
                      <span class="value">{{ type.survivalRate }}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 胎次统计 -->
            <div class="lambing-statistics-section">
              <h3>胎次统计</h3>
              <div class="parity-stats-table">
                <table>
                  <thead>
                    <tr>
                      <th>胎次</th>
                      <th>产羔次数</th>
                      <th>占比</th>
                      <th>总羔羊</th>
                      <th>存活羔羊</th>
                      <th>平均产羔数</th>
                      <th>存活率</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="parity in lambingData.parityStatistics" :key="parity.parity">
                      <td>第{{ parity.parity }}胎</td>
                      <td>{{ parity.count }}</td>
                      <td>{{ parity.percentage }}%</td>
                      <td>{{ parity.totalLambs }}</td>
                      <td>{{ parity.liveLambs }}</td>
                      <td>{{ parity.averageLambsPerLambing }}</td>
                      <td>{{ parity.survivalRate }}%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 羊场统计 -->
            <div class="lambing-statistics-section">
              <h3>羊场统计</h3>
              <div class="farm-stats-table">
                <table>
                  <thead>
                    <tr>
                      <th>羊场名称</th>
                      <th>产羔次数</th>
                      <th>占比</th>
                      <th>总羔羊</th>
                      <th>存活羔羊</th>
                      <th>存活率</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="farm in lambingData.farmStatistics" :key="farm.farmName">
                      <td>{{ farm.farmName }}</td>
                      <td>{{ farm.count }}</td>
                      <td>{{ farm.percentage }}%</td>
                      <td>{{ farm.totalLambs }}</td>
                      <td>{{ farm.liveLambs }}</td>
                      <td>{{ farm.survivalRate }}%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 品种统计 -->
            <div class="lambing-statistics-section">
              <h3>品种统计</h3>
              <div class="breed-stats-table">
                <table>
                  <thead>
                    <tr>
                      <th>品种</th>
                      <th>产羔次数</th>
                      <th>占比</th>
                      <th>总羔羊</th>
                      <th>存活羔羊</th>
                      <th>平均产羔数</th>
                      <th>存活率</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="breed in lambingData.breedStatistics" :key="breed.breed">
                      <td>{{ breed.breed }}</td>
                      <td>{{ breed.count }}</td>
                      <td>{{ breed.percentage }}%</td>
                      <td>{{ breed.totalLambs }}</td>
                      <td>{{ breed.liveLambs }}</td>
                      <td>{{ breed.averageLambsPerLambing }}</td>
                      <td>{{ breed.survivalRate }}%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 最近产羔记录 -->
            <div class="lambing-statistics-section">
              <h3>最近产羔记录</h3>
              <div class="recent-lambing-table">
                <table>
                  <thead>
                    <tr>
                      <th>产羔日期</th>
                      <th>母羊编号</th>
                      <th>品种</th>
                      <th>胎次</th>
                      <th>产羔数</th>
                      <th>存活羔羊</th>
                      <th>死亡羔羊</th>
                      <th>弱羔数量</th>
                      <th>产羔类型</th>
                      <th>饲养员</th>
                      <th>羊场</th>
                      <th>距今天数</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="record in lambingData.recentLambingRecords" :key="record.recordId">
                      <td>{{ formatDate(record.lambingDate) }}</td>
                      <td>{{ record.eweInfo?.tagNumber }}</td>
                      <td>{{ record.eweInfo?.breed }}</td>
                      <td>第{{ record.parity }}胎</td>
                      <td>{{ record.numberOfLambs }}</td>
                      <td>{{ record.liveLambs }}</td>
                      <td>{{ record.deadLambs }}</td>
                      <td>{{ record.weakLambs }}</td>
                      <td>{{ getLambingTypeChinese(record.lambingType) }}</td>
                      <td>{{ record.eweInfo?.shepherdName }}</td>
                      <td>{{ record.eweInfo?.farmName }}</td>
                      <td>{{ record.daysSinceLambing }} 天</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 趋势分析 -->
            <div class="lambing-statistics-section">
              <h3>趋势分析</h3>
              <div class="trend-analysis">
                <div class="trend-item">
                  <span class="trend-label">平均产羔数：</span>
                  <span class="trend-value">{{ lambingData.trendAnalysis?.averageLambsPerLambing || 0 }} 只/次</span>
                </div>
                <div class="trend-item">
                  <span class="trend-label">平均存活羔羊数：</span>
                  <span class="trend-value">{{ lambingData.trendAnalysis?.averageLiveLambsPerLambing || 0 }} 只/次</span>
                </div>
                <div class="trend-item">
                  <span class="trend-label">最常见产羔类型：</span>
                  <span class="trend-value">{{ getLambingTypeChinese(lambingData.trendAnalysis?.mostCommonLambingType) || '无数据' }}</span>
                </div>
                <div class="trend-item">
                  <span class="trend-label">最高产羔胎次：</span>
                  <span class="trend-value">第{{ lambingData.trendAnalysis?.mostProductiveParity || 0 }}胎</span>
                </div>
                <div class="trend-item">
                  <span class="trend-label">最佳存活率品种：</span>
                  <span class="trend-value">{{ lambingData.trendAnalysis?.bestSurvivalRateBreed || '无数据' }}</span>
                </div>
              </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="lambingLoading" class="loading-overlay">
              <div class="loading-spinner"></div>
              <div class="loading-text">加载中...</div>
            </div>
          </div>
        </div>

        <!-- 种母配怀统计页面 -->
        <div v-if="currentPage === 'breeding-statistics'" class="page-content">
          <div class="breeding-statistics-container">
            <!-- 页面头部 -->
            <div class="breeding-statistics-header">
              <h2>种母配怀统计</h2>
              <div class="header-actions">
                <button @click="refreshBreedingData" class="refresh-btn">
                  <span>刷新数据</span>
                </button>
              </div>
            </div>

            <!-- 筛选条件 -->
            <div class="breeding-statistics-filters">
              <div class="filter-row">
                <div class="filter-item">
                  <label>羊场选择：</label>
                  <select v-model="breedingFilterParams.farmId" @change="handleBreedingFilterChange">
                    <option value="">全部羊场</option>
                    <option v-for="farm in breedingFarms" :key="farm.farmId" :value="farm.farmId">
                      {{ farm.farmName }}
                    </option>
                  </select>
                </div>
                <div class="filter-item">
                  <label>开始日期：</label>
                  <input type="date" v-model="breedingFilterParams.startDate" @change="handleBreedingFilterChange" />
                </div>
                <div class="filter-item">
                  <label>结束日期：</label>
                  <input type="date" v-model="breedingFilterParams.endDate" @change="handleBreedingFilterChange" />
                </div>
                <div class="filter-item">
                  <label>年份：</label>
                  <select v-model="breedingFilterParams.year" @change="handleBreedingFilterChange">
                    <option value="">全部年份</option>
                    <option value="2024">2024年</option>
                    <option value="2023">2023年</option>
                    <option value="2022">2022年</option>
                  </select>
                </div>
                <div class="filter-actions">
                  <button @click="searchBreedingData" class="search-btn">查询</button>
                  <button @click="resetBreedingFilter" class="reset-btn">重置</button>
                </div>
              </div>
            </div>

            <!-- 基础统计概览 -->
            <div class="breeding-statistics-overview">
              <div class="overview-card">
                <div class="card-icon">🐑</div>
                <div class="card-content">
                  <div class="card-title">总配怀事件</div>
                  <div class="card-value">{{ breedingData.basicStatistics?.totalBreedingEvents || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">🤰</div>
                <div class="card-content">
                  <div class="card-title">已怀孕母羊</div>
                  <div class="card-value">{{ breedingData.basicStatistics?.totalPregnantEwes || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">❌</div>
                <div class="card-content">
                  <div class="card-title">未怀孕母羊</div>
                  <div class="card-value">{{ breedingData.basicStatistics?.totalNonPregnantEwes || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">💔</div>
                <div class="card-content">
                  <div class="card-title">流产母羊</div>
                  <div class="card-value">{{ breedingData.basicStatistics?.totalMiscarriedEwes || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">❓</div>
                <div class="card-content">
                  <div class="card-title">未知状态</div>
                  <div class="card-value">{{ breedingData.basicStatistics?.totalUnknownStatus || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">📈</div>
                <div class="card-content">
                  <div class="card-title">怀孕率</div>
                  <div class="card-value">{{ breedingData.basicStatistics?.pregnancyRate || 0 }}%</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">⚠️</div>
                <div class="card-content">
                  <div class="card-title">流产率</div>
                  <div class="card-value">{{ breedingData.basicStatistics?.miscarriageRate || 0 }}%</div>
                </div>
              </div>
            </div>

            <!-- 月度统计 -->
            <div class="breeding-statistics-section">
              <h3>月度统计</h3>
              <div class="monthly-stats-table">
                <table>
                  <thead>
                    <tr>
                      <th>月份</th>
                      <th>配怀事件</th>
                      <th>已怀孕</th>
                      <th>未怀孕</th>
                      <th>流产</th>
                      <th>怀孕率</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="month in breedingData.monthlyStatistics" :key="`${month.year}-${month.month}`">
                      <td>{{ month.monthName }}</td>
                      <td>{{ month.totalBreedingEvents }}</td>
                      <td>{{ month.pregnantCount }}</td>
                      <td>{{ month.nonPregnantCount }}</td>
                      <td>{{ month.miscarriedCount }}</td>
                      <td>{{ month.pregnancyRate }}%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 配种结果统计 -->
            <div class="breeding-statistics-section">
              <h3>配种结果统计</h3>
              <div class="breeding-result-stats">
                <div 
                  v-for="result in breedingData.breedingResultStatistics" 
                  :key="result.result"
                  class="breeding-result-card"
                >
                  <div class="result-header">
                    <span class="result-name">{{ getBreedingResultChinese(result.result) }}</span>
                    <span class="result-count">{{ result.count }} 次</span>
                  </div>
                  <div class="result-details">
                    <div class="detail-item">
                      <span class="label">占比：</span>
                      <span class="value">{{ result.percentage }}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 配种方式统计 -->
            <div class="breeding-statistics-section">
              <h3>配种方式统计</h3>
              <div class="breeding-method-stats">
                <div 
                  v-for="method in breedingData.breedingMethodStatistics" 
                  :key="method.method"
                  class="breeding-method-card"
                >
                  <div class="method-header">
                    <span class="method-name">{{ getBreedingMethodChinese(method.method) }}</span>
                    <span class="method-count">{{ method.count }} 次</span>
                  </div>
                  <div class="method-details">
                    <div class="detail-item">
                      <span class="label">占比：</span>
                      <span class="value">{{ method.percentage }}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 羊场统计 -->
            <div class="breeding-statistics-section">
              <h3>羊场统计</h3>
              <div class="farm-stats-table">
                <table>
                  <thead>
                    <tr>
                      <th>羊场名称</th>
                      <th>配怀事件</th>
                      <th>已怀孕</th>
                      <th>未怀孕</th>
                      <th>流产</th>
                      <th>怀孕率</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="farm in breedingData.farmStatistics" :key="farm.farmId">
                      <td>{{ farm.farmName }}</td>
                      <td>{{ farm.totalBreedingEvents }}</td>
                      <td>{{ farm.pregnantCount }}</td>
                      <td>{{ farm.nonPregnantCount }}</td>
                      <td>{{ farm.miscarriedCount }}</td>
                      <td>{{ farm.pregnancyRate }}%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 品种统计 -->
            <div class="breeding-statistics-section">
              <h3>品种统计</h3>
              <div class="breed-stats-table">
                <table>
                  <thead>
                    <tr>
                      <th>品种</th>
                      <th>配怀事件</th>
                      <th>已怀孕</th>
                      <th>未怀孕</th>
                      <th>流产</th>
                      <th>怀孕率</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="breed in breedingData.breedStatistics" :key="breed.breed">
                      <td>{{ breed.breed }}</td>
                      <td>{{ breed.totalBreedingEvents }}</td>
                      <td>{{ breed.pregnantCount }}</td>
                      <td>{{ breed.nonPregnantCount }}</td>
                      <td>{{ breed.miscarriedCount }}</td>
                      <td>{{ breed.pregnancyRate }}%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 最近配怀记录 -->
            <div class="breeding-statistics-section">
              <h3>最近配怀记录</h3>
              <div class="recent-breeding-table">
                <table>
                  <thead>
                    <tr>
                      <th>配怀日期</th>
                      <th>母羊编号</th>
                      <th>公羊编号</th>
                      <th>怀孕状态</th>
                      <th>配种结果</th>
                      <th>配种方式</th>
                      <th>配种次数</th>
                      <th>预产期</th>
                      <th>实际产羔日期</th>
                      <th>羊场</th>
                      <th>母羊年龄</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="record in breedingData.recentBreedingRecords" :key="record.recordId">
                      <td>{{ formatDate(record.breedingDate) }}</td>
                      <td>{{ record.eweName }}</td>
                      <td>{{ record.ramName }}</td>
                      <td>{{ getBreedingStatusChinese(record.pregnancyStatus) }}</td>
                      <td>{{ record.breedingResult }}</td>
                      <td>{{ getBreedingMethodChinese(record.breedingMethod) }}</td>
                      <td>{{ record.breedingAttemptNumber }}</td>
                      <td>{{ formatDate(record.expectedDeliveryDate) }}</td>
                      <td>{{ formatDate(record.actualDeliveryDate) }}</td>
                      <td>{{ record.farmName }}</td>
                      <td>{{ record.age }} 岁</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 趋势分析 -->
            <div class="breeding-statistics-section">
              <h3>趋势分析</h3>
              <div class="trend-analysis">
                <div class="trend-item">
                  <span class="trend-label">怀孕率趋势：</span>
                  <span class="trend-value">{{ breedingData.trendAnalysis?.pregnancyRateTrend?.length || 0 }} 个月数据</span>
                </div>
                <div class="trend-item">
                  <span class="trend-label">配怀量趋势：</span>
                  <span class="trend-value">{{ breedingData.trendAnalysis?.breedingVolumeTrend?.length || 0 }} 个月数据</span>
                </div>
              </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="breedingLoading" class="loading-overlay">
              <div class="loading-spinner"></div>
              <div class="loading-text">加载中...</div>
            </div>
          </div>
        </div>

        <!-- 种母生产统计页面 -->
        <div v-if="currentPage === 'production-statistics'" class="page-content">
          <div class="production-statistics-container">
            <!-- 页面头部 -->
            <div class="production-statistics-header">
              <h2>种母生产统计</h2>
              <div class="header-actions">
                <button @click="refreshProductionData" class="refresh-btn">
                  <span>刷新数据</span>
                </button>
              </div>
            </div>

            <!-- 筛选条件 -->
            <div class="production-statistics-filters">
              <div class="filter-row">
                <div class="filter-item">
                  <label>羊场选择：</label>
                  <select v-model="productionFilterParams.farmId" @change="handleProductionFilterChange">
                    <option value="">全部羊场</option>
                    <option v-for="farm in productionFarms" :key="farm.farmId" :value="farm.farmId">
                      {{ farm.farmName }}
                    </option>
                  </select>
                </div>
                <div class="filter-item">
                  <label>开始日期：</label>
                  <input type="date" v-model="productionFilterParams.startDate" @change="handleProductionFilterChange" />
                </div>
                <div class="filter-item">
                  <label>结束日期：</label>
                  <input type="date" v-model="productionFilterParams.endDate" @change="handleProductionFilterChange" />
                </div>
                <div class="filter-item">
                  <label>年份：</label>
                  <select v-model="productionFilterParams.year" @change="handleProductionFilterChange">
                    <option value="">全部年份</option>
                    <option value="2024">2024年</option>
                    <option value="2023">2023年</option>
                    <option value="2022">2022年</option>
                  </select>
                </div>
                <div class="filter-item">
                  <label>生产类型：</label>
                  <select v-model="productionFilterParams.productionType" @change="handleProductionFilterChange">
                    <option value="">全部类型</option>
                    <option value="Wool">羊毛</option>
                    <option value="Milk">羊奶</option>
                    <option value="Meat">羊肉</option>
                    <option value="Breeding">繁殖</option>
                    <option value="Recovery">康复</option>
                    <option value="Research">研究</option>
                  </select>
                </div>
                <div class="filter-actions">
                  <button @click="searchProductionData" class="search-btn">查询</button>
                  <button @click="resetProductionFilter" class="reset-btn">重置</button>
                </div>
              </div>
            </div>

            <!-- 基础统计概览 -->
            <div class="production-statistics-overview">
              <div class="overview-card">
                <div class="card-icon">📊</div>
                <div class="card-content">
                  <div class="card-title">总生产记录</div>
                  <div class="card-value">{{ productionData.basicStatistics?.totalProductionRecords || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">📦</div>
                <div class="card-content">
                  <div class="card-title">总生产数量</div>
                  <div class="card-value">{{ productionData.basicStatistics?.totalProductionQuantity || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">📈</div>
                <div class="card-content">
                  <div class="card-title">平均生产数量</div>
                  <div class="card-value">{{ productionData.basicStatistics?.averageProductionQuantity || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">🐑</div>
                <div class="card-content">
                  <div class="card-title">参与母羊数</div>
                  <div class="card-value">{{ productionData.basicStatistics?.totalEwes || 0 }}</div>
                </div>
              </div>
              <div class="overview-card">
                <div class="card-icon">📊</div>
                <div class="card-content">
                  <div class="card-title">平均每只母羊生产</div>
                  <div class="card-value">{{ productionData.basicStatistics?.averageProductionPerEwe || 0 }}</div>
                </div>
              </div>
            </div>

            <!-- 生产类型统计 -->
            <div class="production-statistics-section">
              <h3>生产类型统计</h3>
              <div class="production-type-stats">
                <div 
                  v-for="type in productionData.productionTypeStatistics" 
                  :key="type.productionType"
                  class="production-type-card"
                >
                  <div class="type-header">
                    <span class="type-name">{{ getProductionTypeChinese(type.productionType) }}</span>
                    <span class="type-count">{{ type.count }} 次</span>
                  </div>
                  <div class="type-details">
                    <div class="detail-item">
                      <span class="label">占比：</span>
                      <span class="value">{{ type.percentage }}%</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">总数量：</span>
                      <span class="value">{{ type.totalQuantity }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">平均数量：</span>
                      <span class="value">{{ type.averageQuantity }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">参与母羊：</span>
                      <span class="value">{{ type.eweCount }} 只</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 生产质量统计 -->
            <div class="production-statistics-section">
              <h3>生产质量统计</h3>
              <div class="production-quality-stats">
                <div 
                  v-for="quality in productionData.qualityGradeStatistics" 
                  :key="quality.qualityGrade"
                  class="production-quality-card"
                >
                  <div class="quality-header">
                    <span class="quality-name">{{ getQualityGradeChinese(quality.qualityGrade) }}</span>
                    <span class="quality-count">{{ quality.count }} 次</span>
                  </div>
                  <div class="quality-details">
                    <div class="detail-item">
                      <span class="label">占比：</span>
                      <span class="value">{{ quality.percentage }}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 生产状态统计 -->
            <div class="production-statistics-section">
              <h3>生产状态统计</h3>
              <div class="production-status-stats">
                <div 
                  v-for="status in productionData.productionStatusStatistics" 
                  :key="status.productionStatus"
                  class="production-status-card"
                >
                  <div class="status-header">
                    <span class="status-name">{{ getProductionStatusChinese(status.productionStatus) }}</span>
                    <span class="status-count">{{ status.count }} 次</span>
                  </div>
                  <div class="status-details">
                    <div class="detail-item">
                      <span class="label">占比：</span>
                      <span class="value">{{ status.percentage }}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 月度统计 -->
            <div class="production-statistics-section">
              <h3>月度统计</h3>
              <div class="monthly-stats-table">
                <table>
                  <thead>
                    <tr>
                      <th>月份</th>
                      <th>生产记录</th>
                      <th>生产数量</th>
                      <th>参与母羊</th>
                      <th>平均生产量</th>
                      <th>生产类型</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="month in productionData.monthlyStatistics" :key="`${month.year}-${month.month}`">
                      <td>{{ month.monthName }}</td>
                      <td>{{ month.productionRecords || month.totalRecords || 0 }}</td>
                      <td>{{ month.productionQuantity || month.totalQuantity || 0 }}</td>
                      <td>{{ month.eweCount }}</td>
                      <td>{{ month.averageProduction || month.averageQuantity || 0 }}</td>
                      <td>{{ month.productionTypes || '暂无数据' }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 羊场统计 -->
            <div class="production-statistics-section">
              <h3>羊场统计</h3>
              <div class="farm-stats-table">
                <table>
                  <thead>
                    <tr>
                      <th>羊场名称</th>
                      <th>生产记录</th>
                      <th>生产数量</th>
                      <th>参与母羊</th>
                      <th>平均生产量</th>
                      <th>主要类型</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="farm in productionData.farmStatistics" :key="farm.farmId">
                      <td>{{ farm.farmName }}</td>
                      <td>{{ farm.productionRecords || farm.totalRecords || 0 }}</td>
                      <td>{{ farm.productionQuantity || farm.totalQuantity || 0 }}</td>
                      <td>{{ farm.eweCount }}</td>
                      <td>{{ farm.averageProduction || farm.averageQuantity || 0 }}</td>
                      <td>{{ getProductionTypeChinese(farm.mainProductionType) || '未知' }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 最近生产记录 -->
            <div class="production-statistics-section">
              <h3>最近生产记录</h3>
              <div class="recent-production-table">
                <table>
                  <thead>
                    <tr>
                      <th>生产日期</th>
                      <th>母羊编号</th>
                      <th>生产类型</th>
                      <th>生产数量</th>
                      <th>生产状态</th>
                      <th>质量等级</th>
                      <th>生产环境</th>
                      <th>兽医检查</th>
                      <th>羊场</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="record in productionData.recentProductionRecords" :key="record.recordId">
                      <td>{{ formatDate(record.productionDate) }}</td>
                      <td>{{ record.eweName || record.EweName || '未知' }}</td>
                      <td>{{ getProductionTypeChinese(record.productionType) }}</td>
                      <td>{{ record.quantity }}</td>
                      <td>{{ getProductionStatusChinese(record.productionStatus) }}</td>
                      <td>{{ getQualityGradeChinese(record.qualityGrade) }}</td>
                      <td>{{ getEnvironmentChinese(record.productionEnvironment) }}</td>
                      <td>{{ record.veterinaryCheckResult || '未检查' }}</td>
                      <td>{{ record.farmName || record.FarmName || '未知' }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 趋势分析 -->
            <div class="production-statistics-section">
              <h3>趋势分析</h3>
              <div class="trend-analysis">
                <div class="trend-item">
                  <span class="trend-label">生产量趋势：</span>
                  <span class="trend-value">{{ productionData.trendAnalysis?.productionVolumeTrend?.length || 0 }} 个月数据</span>
                </div>
                <div class="trend-item">
                  <span class="trend-label">生产记录趋势：</span>
                  <span class="trend-value">{{ productionData.trendAnalysis?.productionCountTrend?.length || 0 }} 个月数据</span>
                </div>
                <div class="trend-item">
                  <span class="trend-label">质量趋势：</span>
                  <span class="trend-value">{{ productionData.trendAnalysis?.qualityTrend?.length || 0 }} 个月数据</span>
                </div>
              </div>
              
              <!-- 趋势数据详情 -->
              <div v-if="productionData.trendAnalysis?.productionVolumeTrend?.length > 0" class="trend-details">
                <h4>生产量趋势详情（最近3个月）</h4>
                <div class="trend-table">
                  <table>
                    <thead>
                      <tr>
                        <th>月份</th>
                        <th>生产量</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(trend, index) in productionData.trendAnalysis.productionVolumeTrend.slice(-3)" :key="index">
                        <td>{{ trend.month || trend.Month }}</td>
                        <td>{{ trend.volume || trend.Volume }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="productionLoading" class="loading-overlay">
              <div class="loading-spinner"></div>
              <div class="loading-text">加载中...</div>
            </div>
          </div>
        </div>

        <!-- 客户管理页面 -->
        <div v-if="currentPage === 'customer'" class="page-content">
          <!-- 客户列表页面 -->
          <div v-if="customerPageState === 'list'" class="customer-container">
            <div class="customer-header">
              <h2>客户管理</h2>
              <div class="header-actions">
                <button @click="addCustomer" class="add-btn">增加</button>
              </div>
            </div>

            <!-- 搜索表单 -->
            <div class="search-form">
              <div class="search-row">
                <div class="search-item">
                  <label>客户编号：</label>
                  <input v-model="customerSearch.customerCode" placeholder="请输入客户编号" />
                </div>
                <div class="search-item">
                  <label>客户名称：</label>
                  <input v-model="customerSearch.customerName" placeholder="请输入客户名称" />
                </div>
                <div class="search-item">
                  <label>联系人姓名：</label>
                  <input v-model="customerSearch.contactPerson" placeholder="请输入联系人姓名" />
                </div>
              </div>
              <div class="search-row">
                <div class="search-item">
                  <label>联系电话：</label>
                  <input v-model="customerSearch.contactPhone" placeholder="请输入联系电话" />
                </div>
                <div class="search-item">
                  <label>客户类型：</label>
                  <select v-model="customerSearch.customerType">
                    <option value="">全部</option>
                    <option value="企业">企业</option>
                    <option value="个人">个人</option>
                    <option value="政府">政府</option>
                  </select>
                </div>
                <div class="search-item">
                  <label>使用状态：</label>
                  <select v-model="customerSearch.isActive">
                    <option value="">全部</option>
                    <option value="true">启用</option>
                    <option value="false">禁用</option>
                  </select>
                </div>
              </div>
              <div class="search-row">
                <div class="search-item">
                  <label>所属行业：</label>
                  <input v-model="customerSearch.industry" placeholder="请输入所属行业" />
                </div>
                <div class="search-item">
                  <label>助记码：</label>
                  <input v-model="customerSearch.mnemonicCode" placeholder="请输入助记码" />
                </div>
                <div class="search-item">
                  <label>所属市场：</label>
                  <input v-model="customerSearch.market" placeholder="请输入所属市场" />
                </div>
              </div>
              <div class="search-row">
                <div class="search-item">
                  <label>客户阶段：</label>
                  <select v-model="customerSearch.customerStage">
                    <option value="">全部</option>
                    <option value="潜在客户">潜在客户</option>
                    <option value="意向客户">意向客户</option>
                    <option value="成交客户">成交客户</option>
                    <option value="流失客户">流失客户</option>
                  </select>
                </div>
                <div class="search-item">
                  <label>自定义标签：</label>
                  <input v-model="customerSearch.customTags" placeholder="请输入自定义标签" />
                </div>
                <div class="search-item">
                  <label>日集档案：</label>
                  <select v-model="customerSearch.hasCollectionArchives">
                    <option value="">全部</option>
                    <option value="true">有</option>
                    <option value="false">无</option>
                  </select>
                </div>
              </div>
              <div class="search-row">
                <div class="search-item">
                  <label>排序字段：</label>
                  <select v-model="customerSearch.sortBy">
                    <option value="">默认排序</option>
                    <option value="customerCode">客户编号</option>
                    <option value="customerName">客户名称</option>
                    <option value="contactPerson">联系人</option>
                    <option value="createdAt">创建时间</option>
                    <option value="updatedAt">更新时间</option>
                  </select>
                </div>
                <div class="search-item">
                  <!-- 占位，保持布局 -->
                </div>
                <div class="search-item">
                  <!-- 占位，保持布局 -->
                </div>
              </div>
              <div class="search-actions">
                <button @click="searchCustomers" class="search-btn">查询</button>
                <button @click="resetCustomerSearch" class="reset-btn">重置</button>
              </div>
            </div>

            <!-- 数据表格 -->
            <div class="table-container">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>客户编号</th>
                    <th>客户名称</th>
                    <th>联系人</th>
                    <th>联系电话</th>
                    <th>客户类型</th>
                    <th>所属行业</th>
                    <th>所属市场</th>
                    <th>客户阶段</th>
                    <th>自定义标签</th>
                    <th>状态</th>
                    <th>日集档案</th>
                    <th>创建时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="customer in customers" :key="customer.id">
                    <td>{{ customer.customerCode }}</td>
                    <td>{{ customer.customerName }}</td>
                    <td>{{ customer.contactPerson }}</td>
                    <td>{{ customer.contactPhone }}</td>
                    <td>{{ customer.customerType }}</td>
                    <td>{{ customer.industry }}</td>
                    <td>{{ customer.market }}</td>
                    <td>{{ customer.customerStage }}</td>
                    <td>{{ customer.customTags }}</td>
                    <td>
                      <span :class="customer.isActive ? 'status-active' : 'status-inactive'">
                        {{ customer.isActive ? '启用' : '禁用' }}
                      </span>
                    </td>
                    <td>
                      <span :class="customer.hasCollectionArchives ? 'status-active' : 'status-inactive'">
                        {{ customer.hasCollectionArchives ? '有' : '无' }}
                      </span>
                    </td>
                    <td>{{ formatDate(customer.createdAt || customer.createdOn) }}</td>
                    <td>
                      <button @click="viewCustomer(customer)" class="action-btn view-btn">查看详情</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- 分页 -->
            <div class="pagination">
              <div class="pagination-info">
                共 {{ customerPagination.total }} 条记录，第 {{ customerPagination.currentPage }} / {{ customerPagination.totalPages }} 页
              </div>
              <div class="pagination-controls">
                <button 
                  @click="changeCustomerPage(customerPagination.currentPage - 1)" 
                  :disabled="customerPagination.currentPage <= 1"
                  class="page-btn"
                >
                  上一页
                </button>
                <span class="page-info">{{ customerPagination.currentPage }} / {{ customerPagination.totalPages }}</span>
                <button 
                  @click="changeCustomerPage(customerPagination.currentPage + 1)" 
                  :disabled="customerPagination.currentPage >= customerPagination.totalPages"
                  class="page-btn"
                >
                  下一页
                </button>
              </div>
            </div>
          </div>

          <!-- 客户新增页面 -->
          <div v-if="customerPageState === 'add'" class="customer-add-container">
            <div class="add-header">
              <h2>新增客户</h2>
              <button @click="backToCustomerList" class="back-btn">返回列表</button>
            </div>

            <form @submit.prevent="submitCustomer" class="add-form">
              <div class="form-section">
                <h3>基本信息</h3>
                <div class="form-row">
                  <div class="form-group">
                    <label>客户编号：</label>
                    <input v-model="newCustomer.customerCode" placeholder="请输入客户编号" />
                    <div class="field-tip">示例：KH001、KH002</div>
                  </div>
                  <div class="form-group">
                    <label>客户名称：</label>
                    <input v-model="newCustomer.customerName" required placeholder="请输入客户名称" />
                    <div class="field-tip">示例：山西羊场、北京农业科技</div>
                  </div>
                  <div class="form-group">
                    <label>联系人姓名：</label>
                    <input v-model="newCustomer.contactPerson" required placeholder="请输入联系人姓名" />
                    <div class="field-tip">示例：张三、李四</div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group">
                    <label>联系电话：</label>
                    <input v-model="newCustomer.contactPhone" required placeholder="请输入联系电话" />
                    <div class="field-tip">示例：13800138001</div>
                  </div>
                  <div class="form-group">
                    <label>身份证号：</label>
                    <input v-model="newCustomer.contactIdNumber" placeholder="请输入身份证号" />
                    <div class="field-tip">示例：110101199001011234</div>
                  </div>
                  <div class="form-group">
                    <label>客户类型：</label>
                    <select v-model="newCustomer.customerType" required>
                      <option value="">请选择客户类型</option>
                      <option value="企业">企业</option>
                      <option value="个人">个人</option>
                      <option value="政府">政府</option>
                    </select>
                    <div class="field-tip">选择客户类型</div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group">
                    <label>地址：</label>
                    <div class="address-input-group">
                      <input v-model="newCustomer.address" placeholder="请输入地址" />
                      <button type="button" @click="openCustomerMapDialog" class="map-btn">地图定位</button>
                    </div>
                    <div class="field-tip">示例：山西省太原市小店区羊场路123号</div>
                  </div>
                  <div class="form-group">
                    <label>所属行业：</label>
                    <input v-model="newCustomer.industry" placeholder="请输入所属行业" />
                    <div class="field-tip">示例：农业、科技、制造</div>
                  </div>
                  <div class="form-group">
                    <label>统一社会信用代码：</label>
                    <input v-model="newCustomer.creditCode" placeholder="请输入统一社会信用代码" />
                    <div class="field-tip">示例：91140100MA0L123456</div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group">
                    <label>助记码：</label>
                    <input v-model="newCustomer.mnemonicCode" placeholder="请输入助记码" />
                    <div class="field-tip">示例：SX（山西）、BJ（北京）</div>
                  </div>
                  <div class="form-group">
                    <label>客户阶段：</label>
                    <select v-model="newCustomer.customerStage">
                      <option value="">请选择客户阶段</option>
                      <option value="潜在">潜在客户</option>
                      <option value="意向">意向客户</option>
                      <option value="成交">成交客户</option>
                      <option value="流失">流失客户</option>
                    </select>
                    <div class="field-tip">选择客户阶段</div>
                  </div>
                  <div class="form-group">
                    <label>自定义标签：</label>
                    <input v-model="newCustomer.customTags" placeholder="请输入自定义标签" />
                    <div class="field-tip">示例：VIP客户,大客户</div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group">
                    <label>采购意向：</label>
                    <input v-model="newCustomer.purchaseIntent" placeholder="请输入采购意向" />
                    <div class="field-tip">示例：饲料,设备</div>
                  </div>
                  <div class="form-group">
                    <label>日集档案：</label>
                    <input v-model="newCustomer.collectionArchives" placeholder="请输入日集档案" />
                    <div class="field-tip">示例：档案001</div>
                  </div>
                  <div class="form-group">
                    <label>归属单位：</label>
                    <input v-model="newCustomer.belongsToUnit" placeholder="请输入归属单位" />
                    <div class="field-tip">示例：宏光养羊</div>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group">
                    <label>所属市场：</label>
                    <input v-model="newCustomer.market" placeholder="请输入所属市场" />
                    <div class="field-tip">示例：山西、北京</div>
                  </div>
                  <div class="form-group">
                    <label>是否启用：</label>
                    <input type="checkbox" v-model="newCustomer.isActive" />
                    <span>启用</span>
                    <div class="field-tip">勾选表示启用该客户</div>
                  </div>
                  <div class="form-group">
                    <!-- 占位，保持布局 -->
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group full-width">
                    <label>备注：</label>
                    <textarea v-model="newCustomer.memo" placeholder="请输入备注信息" rows="3"></textarea>
                    <div class="field-tip">示例：大型羊场，采购量大</div>
                  </div>
                </div>
              </div>

              <div class="form-actions">
                <button type="submit" class="submit-btn">保存</button>
                <button type="button" @click="backToCustomerList" class="cancel-btn">取消</button>
              </div>
            </form>
          </div>

          <!-- 客户地址选择地图对话框 -->
          <div v-if="showCustomerMapDialog" class="map-dialog-overlay" @click="closeCustomerMapDialog">
            <div class="map-dialog-content" @click.stop>
              <div class="map-dialog-header">
                <h3>选择客户地址</h3>
                <button @click="closeCustomerMapDialog" class="close-btn">&times;</button>
              </div>
              
              <div class="map-dialog-body">
                <div class="search-section">
                  <input 
                    v-model="customerMapAddress" 
                    placeholder="搜索地址..." 
                    @keyup.enter="searchCustomerAddress"
                    class="search-input"
                  />
                  <button @click="searchCustomerAddress" class="search-btn">搜索</button>
                </div>
                
                <div id="customer-map-container" class="map-container">
                  <div v-if="!customerMapLoaded" class="map-loading">
                    <div class="loading-spinner"></div>
                    <p>地图加载中...</p>
                  </div>
                </div>
                
                <div v-if="customerSelectedAddress || customerMapAddress" class="selected-address">
                  <h4>当前地址：</h4>
                  <p class="selected-text">{{ customerSelectedAddress || customerMapAddress }}</p>
                  <p class="debug-info">调试信息: selectedAddress="{{ customerSelectedAddress }}", mapAddress="{{ customerMapAddress }}"</p>
                </div>
              </div>
              
              <div class="map-dialog-footer">
                <button @click="confirmCustomerAddress" class="confirm-btn">确认选择</button>
                <button @click="closeCustomerMapDialog" class="cancel-btn">取消</button>
              </div>
            </div>
          </div>

          <!-- 客户详情页面 -->
          <div v-if="customerPageState === 'detail'" class="customer-detail-container">
            <div class="detail-header">
              <h2>客户详情</h2>
              <button @click="backToCustomerList" class="back-btn">返回列表</button>
            </div>

            <div v-if="customerDetail" class="detail-content">
              <div class="detail-section">
                <h3>基本信息</h3>
                <div class="detail-grid">
                  <div class="detail-item">
                    <label>客户编号：</label>
                    <span>{{ customerDetail.customerCode }}</span>
                  </div>
                  <div class="detail-item">
                    <label>客户名称：</label>
                    <span>{{ customerDetail.customerName }}</span>
                  </div>
                  <div class="detail-item">
                    <label>联系人姓名：</label>
                    <span>{{ customerDetail.contactPerson }}</span>
                  </div>
                  <div class="detail-item">
                    <label>联系电话：</label>
                    <span>{{ customerDetail.contactPhone }}</span>
                  </div>
                  <div class="detail-item">
                    <label>身份证号：</label>
                    <span>{{ customerDetail.contactIdNumber || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>客户类型：</label>
                    <span>{{ customerDetail.customerType }}</span>
                  </div>
                  <div class="detail-item">
                    <label>地址：</label>
                    <span>{{ customerDetail.address || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>所属行业：</label>
                    <span>{{ customerDetail.industry || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>统一社会信用代码：</label>
                    <span>{{ customerDetail.creditCode || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>助记码：</label>
                    <span>{{ customerDetail.mnemonicCode || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>客户阶段：</label>
                    <span>{{ customerDetail.customerStage || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>自定义标签：</label>
                    <span>{{ customerDetail.customTags || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>采购意向：</label>
                    <span>{{ customerDetail.purchaseIntent || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>日集档案：</label>
                    <span>{{ customerDetail.collectionArchives || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>归属单位：</label>
                    <span>{{ customerDetail.belongsToUnit || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>所属市场：</label>
                    <span>{{ customerDetail.market || '-' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>是否启用：</label>
                    <span :class="customerDetail.isActive ? 'status-active' : 'status-inactive'">
                      {{ customerDetail.isActive ? '启用' : '禁用' }}
                    </span>
                  </div>
                  <div class="detail-item">
                    <label>创建时间：</label>
                    <span>{{ formatDate(customerDetail.createdAt) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>更新时间：</label>
                    <span>{{ formatDate(customerDetail.updatedAt) }}</span>
                  </div>
                  <div class="detail-item full-width">
                    <label>备注：</label>
                    <span>{{ customerDetail.memo || '-' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- 地图选择对话框 -->
    <div v-if="showMapDialog" class="map-dialog-overlay" @click="closeMapDialog">
      <div class="map-dialog" @click.stop>
        <div class="map-dialog-header">
          <h3>地址选择</h3>
          <button class="close-btn" @click="closeMapDialog">×</button>
        </div>
        
        <div class="map-dialog-content">
          <!-- 搜索框 -->
          <div class="search-section">
            <input 
              v-model="mapAddress" 
              type="text" 
              placeholder="请输入地址进行搜索" 
              class="search-input"
            />
            <button @click="searchAddress" class="search-btn">搜索</button>
            <button @click="mapAddress = ''" class="clear-btn">×</button>
          </div>
          

          
          <!-- 地图容器 -->
          <div id="map-container" class="map-container">
            <div v-if="!mapLoaded" class="map-loading">
              <div class="loading-spinner"></div>
              <p>地图加载中...</p>
            </div>
          </div>
          
          <!-- 已选择地址显示 -->
          <div v-if="selectedAddress || mapAddress" class="selected-address">
            <h4>当前地址：</h4>
            <p class="selected-text">{{ selectedAddress || mapAddress }}</p>
            <p class="debug-info">调试信息: selectedAddress="{{ selectedAddress }}", mapAddress="{{ mapAddress }}"</p>
          </div>
        </div>
        
        <div class="map-dialog-footer">
          <button @click="confirmAddress" class="confirm-btn">
            确认选择
          </button>
          <button @click="closeMapDialog" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  height: 70px;
  display: flex;
  align-items: center;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 40px;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logout-btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: rgba(255,255,255,0.3);
}

.main-layout {
  display: flex;
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar {
  width: 220px;
  background: #2c3e50;
  color: white;
  margin: 0 !important;
  padding: 0 !important;
}

.menu {
  padding: 20px 0;
}

.menu-item {
  padding: 15px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  font-size: 16px;
}

.menu-item:hover {
  background: rgba(255,255,255,0.1);
  border-left-color: #3498db;
}

.menu-item.active {
  background: rgba(255,255,255,0.15);
  border-left-color: #3498db;
}

.content {
  flex: 1;
  padding: 40px;
  background: #f8f9fa;
  overflow-y: auto;
}

.page-content {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.page-content h2 {
  margin: 0 0 30px 0;
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.dashboard-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.dashboard-card h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: 500;
  opacity: 0.9;
}

.dashboard-card .number {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
}

.dashboard-card .status {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #2ecc71;
}

/* 供应商管理样式 */
.supplier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.supplier-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.export-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.export-format-select {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
}

.add-btn,
.import-export-btn,
.init-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.add-btn:hover,
.import-export-btn:hover,
.init-btn:hover {
  background: #2980b9;
}

.init-btn {
  background: #27ae60;
}

.init-btn:hover {
  background: #229954;
}

.search-form {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.search-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.search-item {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.search-item.checkbox-item {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.search-item.checkbox-item label {
  margin-bottom: 0;
  cursor: pointer;
}

.search-item.checkbox-item input[type="checkbox"] {
  margin: 0;
}

.search-item label {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  font-weight: 500;
}

.search-item input,
.search-item select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.search-btn,
.reset-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.search-btn {
  background: #27ae60;
  color: white;
}

.search-btn:hover {
  background: #229954;
}

.reset-btn {
  background: #95a5a6;
  color: white;
}

.reset-btn:hover {
  background: #7f8c8d;
}

.table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
}

.data-table tr:hover {
  background: #f8f9fa;
}

.action-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 5px;
  transition: background-color 0.3s ease;
}

.view-btn {
  background: #3498db;
  color: white;
}

.view-btn:hover {
  background: #2980b9;
}

.edit-btn {
  background: #f39c12;
  color: white;
}

.edit-btn:hover {
  background: #e67e22;
}

.delete-btn {
  background: #e74c3c;
  color: white;
}

.delete-btn:hover {
  background: #c0392b;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #3498db;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #666;
  margin: 0 10px;
}

.page-size-options {
  display: flex;
  gap: 5px;
}

.page-size-option {
  padding: 4px 8px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.page-size-option:hover {
  background: #f8f9fa;
  border-color: #3498db;
}

.page-size-option.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

/* 新增供应商页面样式 */
.add-supplier-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 客户新增页面样式 */
.customer-add-container {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin: 20px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.add-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
}

.add-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.add-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section {
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  padding: 20px;
  background: #f8f9fa;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.form-section h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.form-group.full-width {
  width: 100%;
}

.form-group label {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
  transform: translateY(-1px);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

.form-group input[type="checkbox"] {
  width: auto;
  margin-right: 5px;
}

.field-tip {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 4px;
  line-height: 1.4;
  font-style: italic;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #ecf0f1;
}

.submit-btn,
.cancel-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  min-width: 100px;
}

.submit-btn {
  background: #27ae60;
  color: white;
  box-shadow: 0 2px 4px rgba(39, 174, 96, 0.3);
}

.submit-btn:hover {
  background: #229954;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(39, 174, 96, 0.4);
}

.cancel-btn {
  background: #95a5a6;
  color: white;
  box-shadow: 0 2px 4px rgba(149, 165, 166, 0.3);
}

.cancel-btn:hover {
  background: #7f8c8d;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(149, 165, 166, 0.4);
}

.add-supplier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.add-supplier-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.back-btn {
  background: #95a5a6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(149, 165, 166, 0.3);
}

.back-btn:hover {
  background: #7f8c8d;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(149, 165, 166, 0.4);
}

.add-supplier-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.form-item {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.form-item label {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  font-weight: 500;
}

.form-item input,
.form-item select,
.form-item textarea {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-item textarea {
  resize: vertical;
  min-height: 80px;
}

.field-tip {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  line-height: 1.4;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.submit-btn,
.cancel-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.submit-btn {
  background: #27ae60;
  color: white;
}

.submit-btn:hover {
  background: #229954;
}

.cancel-btn {
  background: #95a5a6;
  color: white;
}

.cancel-btn:hover {
  background: #7f8c8d;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .customer-add-container {
    padding: 20px;
    margin: 10px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .form-group {
    width: 100%;
  }
  
  .add-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}

/* 地址输入组样式 */
.address-input-group {
  display: flex;
  gap: 8px;
}

.address-input-group input {
  flex: 1;
}

.map-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.map-btn:hover {
  background: #2980b9;
}

/* 地图对话框样式 */
.map-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.map-dialog {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.map-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.map-dialog-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.close-btn:hover {
  background: #e9ecef;
  color: #333;
}

.map-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #eee;
  background: #f8f9fa;
}

.confirm-btn {
  background: #27ae60;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.confirm-btn:hover:not(:disabled) {
  background: #229954;
}

.confirm-btn:disabled {
  background: #95a5a6;
  cursor: not-allowed;
}

.cancel-btn {
  background: #95a5a6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.cancel-btn:hover {
  background: #7f8c8d;
}

.map-dialog-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
}

.search-section {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 0;
}

.search-btn {
  background: #27ae60;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

.search-btn:hover {
  background: #229954;
}

.clear-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.clear-btn:hover {
  background: #e9ecef;
  color: #333;
}

.preset-addresses {
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 15px;
  margin-top: 15px;
}

.preset-addresses h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.address-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s ease;
}

.address-btn:hover {
  background: #2980b9;
}

.address-btn.active {
  background: #27ae60;
  font-weight: 600;
}

.selected-address {
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 15px;
  margin-top: 15px;
}

.selected-address h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.selected-text {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.map-container {
  height: 300px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  position: relative;
  background: #f9f9f9;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 300px;
  min-width: 100%;
}

.map-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f9f9f9;
  z-index: 10;
}

.loading-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #666;
  font-size: 14px;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 供应商详情页面样式 */
.supplier-detail-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.supplier-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.supplier-detail-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.supplier-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-section {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.detail-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-section h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 20px;
  font-weight: 500;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-item label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
  font-weight: 400;
}

.detail-item span {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.detail-item.full-width {
  grid-column: 1 / -1; /* 跨列 */
}

.status-active {
  color: #2ecc71;
  font-weight: 600;
}

.status-inactive {
  color: #e74c3c;
  font-weight: 600;
}

/* 客户详情页面样式 */
.customer-detail-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.detail-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 新增仪表盘样式 */
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 20px;
}

.welcome-section {
  text-align: center;
  padding: 40px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.welcome-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
  color: white;
}

.welcome-subtitle {
  font-size: 20px;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
}

.user-info-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.user-info-card h3 {
  margin-bottom: 20px;
  color: #2c3e50;
  font-size: 22px;
  font-weight: 600;
}

.user-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.user-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info-item label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.user-info-item span {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.function-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.module-card {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

.module-card h3 {
  margin: 0 0 15px 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.module-card p {
  font-size: 16px;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
}

/* 羊场存栏统计样式 */
.sheep-inventory-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.inventory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.inventory-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.refresh-btn, .export-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.refresh-btn {
  background-color: #1890ff;
  color: white;
}

.export-btn {
  background-color: #52c41a;
  color: white;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filter-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  font-weight: 500;
  color: #333;
  min-width: 80px;
}

.filter-item select, .filter-item input {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.filter-actions {
  display: flex;
  gap: 10px;
}

.search-btn, .reset-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.search-btn {
  background-color: #1890ff;
  color: white;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #d9d9d9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.overview-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.overview-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.overview-value {
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 4px;
}

.overview-unit {
  font-size: 12px;
  color: #999;
}

.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
}

.breed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.breed-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.breed-name {
  min-width: 80px;
  font-size: 14px;
  color: #333;
}

.breed-bar {
  flex: 1;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.breed-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1890ff, #52c41a);
  transition: width 0.3s ease;
}

.breed-count {
  min-width: 80px;
  font-size: 12px;
  color: #666;
  text-align: right;
}

.gender-stats {
  display: flex;
  justify-content: space-around;
}

.gender-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gender-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
}

.gender-icon.male {
  background-color: #1890ff;
  color: white;
}

.gender-icon.female {
  background-color: #eb2f96;
  color: white;
}

.gender-info {
  text-align: left;
}

.gender-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.gender-count {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 0 20px;
}

.table-header h3 {
  margin: 0;
  color: #333;
}

.table-actions select {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.table-container {
  padding: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

/* 羊场实时存栏样式 */
.sheep-realtime-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
}

.sheep-realtime-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sheep-realtime-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.header-actions .refresh-btn {
  background: #27ae60;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.header-actions .refresh-btn:hover {
  background: #229954;
}

.sheep-realtime-filters {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.filter-item label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.filter-item select {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
}

.filter-actions {
  display: flex;
  gap: 10px;
}

.filter-actions .search-btn,
.filter-actions .reset-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.filter-actions .search-btn {
  background: #3498db;
  color: white;
}

.filter-actions .search-btn:hover {
  background: #2980b9;
}

.filter-actions .reset-btn {
  background: #95a5a6;
  color: white;
}

.filter-actions .reset-btn:hover {
  background: #7f8c8d;
}

.sheep-realtime-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.overview-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
}

.card-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 5px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
}

.sheep-realtime-section {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.sheep-realtime-section h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.health-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.health-status-card {
  background: white;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
}

.health-status-card.status-normal {
  border-color: #52c41a;
  background: linear-gradient(135deg, #f6ffed, #d9f7be);
}

.health-status-card.status-warning {
  border-color: #faad14;
  background: linear-gradient(135deg, #fffbe6, #ffe58f);
}

.health-status-card.status-critical {
  border-color: #ff4d4f;
  background: linear-gradient(135deg, #fff2f0, #ffccc7);
}

.status-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.status-icon {
  font-size: 20px;
}

.status-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.status-count {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.status-percentage {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.status-indicator {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-indicator.status-normal {
  background: #52c41a;
  color: white;
}

.status-indicator.status-warning {
  background: #faad14;
  color: white;
}

.status-indicator.status-critical {
  background: #ff4d4f;
  color: white;
}

.location-table {
  overflow-x: auto;
}

.location-table table {
  width: 100%;
  border-collapse: collapse;
}

.location-table th,
.location-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.location-table th {
  background: #fafafa;
  font-weight: 600;
  color: #333;
}

.location-table tr:hover {
  background: #f5f5f5;
}

.status-healthy {
  background: #52c41a;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-sick {
  background: #faad14;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-quarantined {
  background: #ff4d4f;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-critical {
  background: #ff4d4f;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.data-table th {
  background-color: #fafafa;
  font-weight: 500;
  color: #333;
}

.data-table tr:hover {
  background-color: #f5f5f5;
}

.status-healthy {
  color: #52c41a;
  font-weight: 500;
}

.status-sick {
  color: #ff4d4f;
  font-weight: 500;
}

.status-quarantined {
  color: #faad14;
  font-weight: 500;
}

.status-normal {
  color: #1890ff;
  font-weight: 500;
}

.status-warning {
  color: #faad14;
  font-weight: 500;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 40px;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 10px;
  color: #666;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .charts-section {
    grid-template-columns: 1fr;
  }
  
  .filter-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .overview-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 饼图样式 */
.location-pie-chart {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pie-chart-container {
  display: flex;
  align-items: center;
  gap: 30px;
}

.pie-chart-container canvas {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pie-chart-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f8f9fa;
  transition: background-color 0.3s ease;
}

.legend-item:hover {
  background: #e9ecef;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.legend-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legend-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.legend-details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.legend-details span:first-child {
  color: #1890ff;
  font-weight: 500;
}

@media (max-width: 768px) {
  .pie-chart-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .pie-chart-container canvas {
    width: 250px;
    height: 250px;
  }
}

/* 产羔统计样式 */
.lambing-statistics-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.lambing-statistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.lambing-statistics-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.refresh-btn, .export-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.refresh-btn {
  background: #1890ff;
  color: white;
}

.refresh-btn:hover {
  background: #40a9ff;
}

.export-btn {
  background: #52c41a;
  color: white;
}

.export-btn:hover {
  background: #73d13d;
}

.lambing-statistics-filters {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filter-row {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
}

.filter-item label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.filter-item select, .filter-item input {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.filter-actions {
  display: flex;
  gap: 10px;
}

.search-btn, .reset-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-btn {
  background: #1890ff;
  color: white;
}

.search-btn:hover {
  background: #40a9ff;
}

.reset-btn {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #d9d9d9;
}

.reset-btn:hover {
  background: #e6e6e6;
}

.lambing-statistics-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.overview-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.card-icon {
  font-size: 32px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 144, 255, 0.1);
  border-radius: 50%;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.lambing-statistics-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.lambing-statistics-section h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.monthly-stats-table, .parity-stats-table, .farm-stats-table, .breed-stats-table, .recent-lambing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.monthly-stats-table th, .monthly-stats-table td,
.parity-stats-table th, .parity-stats-table td,
.farm-stats-table th, .farm-stats-table td,
.breed-stats-table th, .breed-stats-table td,
.recent-lambing-table th, .recent-lambing-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.monthly-stats-table th, .parity-stats-table th, .farm-stats-table th, .breed-stats-table th, .recent-lambing-table th {
  background: #fafafa;
  font-weight: 600;
  color: #333;
}

.monthly-stats-table tr:hover, .parity-stats-table tr:hover, .farm-stats-table tr:hover, .breed-stats-table tr:hover, .recent-lambing-table tr:hover {
  background: #f5f5f5;
}

.lambing-type-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.lambing-type-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.lambing-type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9ecef;
}

.type-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.type-count {
  background: #1890ff;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.type-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-item .label {
  color: #666;
  font-size: 14px;
}

.detail-item .value {
  font-weight: 600;
  color: #333;
}

.trend-analysis {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.trend-item {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 200px;
}

.trend-label {
  color: #666;
  font-size: 14px;
  font-weight: 600;
}

.trend-value {
  font-weight: 600;
  color: #007bff;
  font-size: 16px;
  margin-left: 8px;
}

.trend-details {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.trend-details h4 {
  margin: 0 0 15px 0;
  color: #495057;
  font-size: 16px;
}

.trend-table table {
  width: 100%;
  border-collapse: collapse;
}

.trend-table th,
.trend-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
}

.trend-table th {
  background: #e9ecef;
  font-weight: 600;
  color: #495057;
}

.trend-table td {
  color: #6c757d;
}

/* 种母生产统计样式 */
.production-statistics-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.production-statistics-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.production-statistics-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.production-statistics-filters {
  background: #f8f9fa;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.production-statistics-overview {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.production-statistics-section {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.production-statistics-section:last-child {
  border-bottom: none;
}

.production-statistics-section h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.production-type-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.production-type-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.production-type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.production-quality-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.production-quality-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.production-quality-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.production-status-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.production-status-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.production-status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.recent-production-table {
  overflow-x: auto;
}

.recent-production-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.recent-production-table th,
.recent-production-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
}

.recent-production-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
}

.recent-production-table tr:hover {
  background: #f8f9fa;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-text {
  color: #666;
  font-size: 14px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .lambing-statistics-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .filter-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .lambing-type-stats {
    grid-template-columns: 1fr;
  }
  
  .trend-analysis {
    grid-template-columns: 1fr;
  }
  
  .monthly-stats-table, .parity-stats-table, .farm-stats-table, .breed-stats-table, .recent-lambing-table {
    font-size: 12px;
  }
  
  .monthly-stats-table th, .monthly-stats-table td,
  .parity-stats-table th, .parity-stats-table td,
  .farm-stats-table th, .farm-stats-table td,
  .breed-stats-table th, .breed-stats-table td,
  .recent-lambing-table th, .recent-lambing-table td {
    padding: 8px 4px;
  }
}

/* 种母配怀统计样式 */
.breeding-statistics-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.breeding-statistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.breeding-statistics-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.breeding-statistics-filters {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.breeding-statistics-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.breeding-statistics-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.breeding-statistics-section h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.breeding-result-stats, .breeding-method-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.breeding-result-card, .breeding-method-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.breeding-result-card:hover, .breeding-method-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.result-header, .method-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9ecef;
}

.result-name, .method-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.result-count, .method-count {
  background: #1890ff;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.result-details, .method-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.recent-breeding-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  overflow-x: auto;
}

.recent-breeding-table th, .recent-breeding-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.recent-breeding-table th {
  background: #fafafa;
  font-weight: 600;
  color: #333;
}

.recent-breeding-table tr:hover {
  background: #f5f5f5;
}

@media (max-width: 768px) {
  .breeding-statistics-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .breeding-result-stats, .breeding-method-stats {
    grid-template-columns: 1fr;
  }
  
  .recent-breeding-table {
    font-size: 12px;
  }
  
  .recent-breeding-table th, .recent-breeding-table td {
    padding: 8px 4px;
  }
}

/* 产羔统计图表样式 */
.monthly-stats-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-filter {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.chart-filter label {
  font-weight: 600;
  color: #333;
}

.chart-filter select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  font-size: 14px;
}

.query-btn {
  padding: 8px 20px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.query-btn:hover {
  background: #c82333;
}

.chart-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.lambing-chart {
  width: 100%;
  height: 400px;
}

@media (max-width: 768px) {
  .chart-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .lambing-chart {
    height: 300px;
  }
}
</style>


